Custom Legend with ChartJS v2.0

by

If you guys run through this post and tried the posted answer and didn’t work,
try this one:

  legendCallback: function(chart) {
    var text = [];
    text.push('<ul>');
    for (var i=0; i<chart.data.datasets.length; i++) {
      console.log(chart.data.datasets[i]); // see what's inside the obj.
      text.push('<li>');
      text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
      text.push('</li>');
    }
    text.push('</ul>');
    return text.join("");
  },

Then add this below:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();

To create the legends. Make sure you have an element <div id="chart-legends"></div>

More Related Contents:

  1. How to display data values on Chart.js
  2. Dynamically update values of a chartjs chart
  3. How to add text inside the doughnut chart using Chart.js?
  4. Chart.js — drawing an arbitrary vertical line
  5. Click events on Pie Charts in Chart.js
  6. Destroy chart.js bar graph to redraw other graph in same
  7. ChartJS – Different color per data point
  8. Chart.js – draw horizontal line
  9. How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
  10. How to put rounded corners on a Chart.js Bar chart
  11. How to clear a chart from a canvas so that hover events cannot be triggered?
  12. Different color for each bar in a bar chart; ChartJS
  13. ChartJS: datalabels: show percentage value in Pie piece
  14. Limit labels number on Chart.js line chart
  15. How to set ChartJS Y axis title?
  16. Remove x-axis label/text in chart.js
  17. How to create rounded bars for Bar Chart.js v2?
  18. Chart.js v2: How to make tooltips always appear on pie chart?
  19. chart.js load totally new data
  20. chart.js Failed to create chart: can’t acquire context from the given item
  21. Chartjs Bar Chart showing old data when hovering
  22. How to change colours for Angular-Chart.js
  23. How to add images as labels to Canvas Charts using chart.js
  24. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  25. ng2-charts update labels and data
  26. Horizontal stacked bar chart with chart.js
  27. Chart JS custom tooltip option?
  28. Chart.js Line, different fill color for negative point
  29. How do I put this on Real-Time? I already put (async: True) but it doesnt work
  30. pass single value to three diffrent iframe [closed]

Leave a Comment