Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ChartJS: How to get labels, legend, title to show up?

Tags:

chart.js

I'm having a tough time figuring out how to get labels, legend and title showing up in my Chart JS Line Chart. I've copied the code directly from the example (reproduced below). However, the label "My First dataset" doesn't show up anywhere on the chart and so I can't tell which line is which. I've also tried adding a 'title' to my datasets, but with no luck. Anyone know what I'm missing?

var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [     {         label: "My First dataset",         fillColor: "rgba(220,220,220,0.2)",         strokeColor: "rgba(220,220,220,1)",         pointColor: "rgba(220,220,220,1)",         pointStrokeColor: "#fff",         pointHighlightFill: "#fff",         pointHighlightStroke: "rgba(220,220,220,1)",         data: [65, 59, 80, 81, 56, 55, 40]     },     {         label: "My Second dataset",         fillColor: "rgba(151,187,205,0.2)",         strokeColor: "rgba(151,187,205,1)",         pointColor: "rgba(151,187,205,1)",         pointStrokeColor: "#fff",         pointHighlightFill: "#fff",         pointHighlightStroke: "rgba(151,187,205,1)",         data: [28, 48, 40, 19, 86, 27, 90]     } ]}; 

Thanks, Saswat

like image 465
sapanda Avatar asked Jul 11 '14 23:07

sapanda


People also ask

How do you show legend in Chartjs?

js (3.6. 0), you can control the Legend display with the following code: const options = { plugins: { ... legend: { position: "right", // by default it's top }, ... }, };

How do you hide a legend in Chartjs?

To remove legend on charts with Chart. js v2 and JavaScript, we can set the options. legend to false . const chart1 = new Chart(canvas, { type: "pie", data: data, options: { legend: { display: false, }, tooltips: { enabled: false, }, }, });

What is legend position in chart?

The positions of the chart legend. The supported values are: "top" - the legend is positioned on the top. "bottom" - the legend is positioned on the bottom. "left" - the legend is positioned on the left.


1 Answers

in the option add this parameter

multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>" 
like image 117
Marco Caltagirone Avatar answered Oct 21 '22 12:10

Marco Caltagirone