Chart.js - Increase spacing between bottom legend and chart

Question

i'm trying to achieve something like this but with legend on bottom. When i try adding it at most i can get something like this:

i'm considering separating legend to another div like

<div id="js-legend" class="chart-legend"></div>

but it would be nice to achieve it with the former solution.

Thanks in advance for the help

Answer 1

I think something like this should work.

plugins: [{
          beforeInit: (chart, options) => {
            chart.legend.afterFit = () => {
              if (chart.legend.margins) {
                // Put some padding around the legend/labels
                chart.legend.options.labels.padding = 20;
                // Because you added 20px of padding around the whole legend,
                // you will need to increase the height of the chart to fit it
                chart.height += 40;
              }
            };
          }
        }]

Answer 2

you can use margin-top for #js-legend.