Chart.js - Increase spacing between legend and chart

chart.js chart.js2
Bryan Lewis picture Bryan Lewis · Mar 3, 2017 · Viewed 29.9k times · Source

I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?

Example Chart

Answer

Dorian Maliszewski picture Dorian Maliszewski · Sep 28, 2018

If you want do increase spacing in all charts you can put this code before creating :

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

Of course, I don't try but i think you can change it (or copy the original Chart object before, to keep the original padding).

Bye,

Related questions

Chart.js v2 hide dataset labels

I have the following codes to create a graph using Chart.js v2.1.3: var ctx = $('#gold_chart'); var goldChart = new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: 'I want to remove this Label', data: prices, pointRadius: 0, borderWidth: 1 }] } }); …

Read More
Chart.js 2.0 doughnut tooltip percentages

I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I'm unable to replicate this with chart 2.0. I have searched high and low and have not found a working …

Read More
using array values in chart.js data and label field

I wish to pass values of an array to the data and label fields of the chart.js dataset. Here the code from success of ajax call made to fetch json data. I fetch the json data and store it …

Read More