[Chartjs]-Increase gap between line-chart and legend ChartJS

by

1👍

✅

Depending on where the legend is placed there are some quick fix options available. See this question

For your case and, more often than not, I would recommend generating your own html legend which will give you full control.

You can set this up in the options: 

options: {
   legend: {
       display:false, //turn default legend off
    },
   legendCallback : legendBuilder, //link to your custom function returning html string
}

Define where your legend will go in the html:

<div id="chart-container">
    <canvas id="line-chart"></canvas>
    <div id="chart-legend"></div>
</div>

Then generate your legend:

var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();

working example

Leave a comment