In this article, we will guide you on how to add padding between legend items of a Chart DataPage. This can be applied to all kinds of chart DataPages.

Steps to add padding between legend items of a Chart DataPage:

  1. Create a Chart DataPage.
  2. Add a Header and Footer in the Configure Chart Options screen of the DataPage wizard.
  3. Disable the HTML Editor in the Footer section.
  4. Copy and paste the following code in the Footer section:
  5. Save the DataPage

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

code1
<script type="text/javascript"> 
 
document.addEventListener('DataPageReady', chartUpdateHandler) 
function chartUpdateHandler(event) { 
 
var cleaner = function(interv) { 
clearInterval(interv); 
} 
let interv = setInterval(() => { 
if (!!Highcharts.charts[0]) {  
Highcharts.charts[0].update({ 
legend: { 
        layout: 'vertical', 
        itemMarginTop: 5, 
        itemMarginBottom: 5, 
        padding: 5 
        } 
   });    
   cleaner(interv); 
  } 
}, 200); 
} 
 
</script>