CODEWITHSUNDEEP
javascriptcharts
Marielena A
Marielena A

Reputation: 1

Increase spacing between legend and -chartartJs

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? enter image description here

Upvotes: 0

Views: 2525

Answers (1)

Inacio Schweller
Inacio Schweller

Reputation: 1986

I assume you are using chart.js. If yes, you can use custom HTML legends and apply style rules to them. Start your chart with the normal legends hidden and apply the generateLegend() method to a custom div. 

var customChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    legend: {
      //Because you are going to show your own legend
      display: false
    }
  }
});

//insert legend to any div of your liking and manipulate via CSS
document.getElementById("custom-legend").innerHTML = customChart.generateLegend()

Documentation: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

Fiddle example: https://jsfiddle.net/gmyy3rf5/

Upvotes: 1

Related Questions