score:3
I know this question is old. But this might be useful for someone who is having the problem with legend. In addition to the answer given by ZaneDarken, I modified the chart.js file to show the legend in my pie chart. I changed the legendTemplate(which is declared many times for every chart type) just above these lines :
Chart.Type.extend({
//Passing in a name registers this chart in the Chart namespace
name: "Doughnut",
//Providing a defaults will also register the deafults in the chart namespace
defaults: defaultConfig,
.......
My legendTemplate is changed from
legendTemplate : "
<ul class=\ "<%=name.toLowerCase()%>-legend\">
<% for (var i=0; i<datasets.length; i++){%>
<li><span style=\ "background-color:<%=datasets[i].strokeColor%>\"></span>
<%if(datasets[i].label){%>
<%=datasets[i].label%>
<%}%>
</li>
<%}%>
</ul>"
To
legendTemplate: "
<ul class=\ "<%=name.toLowerCase()%>-legend\">
<% for (var i=0; i<segments.length; i++){%>
<li><span style=\ "-moz-border-radius:7px 7px 7px 7px; border-radius:7px 7px 7px 7px; margin-right:10px;width:15px;height:15px;display:inline-block;background-color:<%=segments[i].fillColor%>\"> </span>
<%if(segments[i].label){%>
<%=s egments[i].label%>
<%}%>
</li>
<%}%>
</ul>"
score:4
For line chart, I use the following codes.
First create custom style
.boxx{
position: relative;
width: 20px;
height: 20px;
border-radius: 3px;
}
Then add this on your line options
var lineOptions = {
legendTemplate : '<table>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<tr><td><div class=\"boxx\" style=\"background-color:<%=datasets[i].fillColor %>\"></div></td>'
+'<% if (datasets[i].label) { %><td><%= datasets[i].label %></td><% } %></tr><tr height="5"></tr>'
+'<% } %>'
+'</table>',
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
document.getElementById('legendDiv').innerHTML = myNewChart.generateLegend();
Don't forget to add
<div id="legendDiv"></div>
on your html where do you want to place your legend. That's it!
score:13
Strangely, I didn't find anything about legends and labels in the Chart.js documentation. It seems like you can't do it with chart.js alone.
I used https://github.com/bebraw/Chart.js.legend which is extremely light, to generate the legends.
score:44
The legend is part of the default options of the ChartJs library. So you do not need to explicitly add it as an option.
The library generates the HTML. It is merely a matter of adding that to the your page. For example, add it to the innerHTML of a given DIV. (Edit the default options if you are editing the colors, etc)
<div>
<canvas id="chartDiv" height="400" width="600"></canvas>
<div id="legendDiv"></div>
</div>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "The Flash's Speed",
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: "Superman's Speed",
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]
}
]
};
var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data);
document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend();
</script>
score:58
You can include a legend template in the chart options:
//legendTemplate takes a template as a string, you can populate the template with values from your dataset
var options = {
legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'
}
//don't forget to pass options in when creating new Chart
var lineChart = new Chart(element).Line(data, options);
//then you just need to generate the legend
var legend = lineChart.generateLegend();
//and append it to your page somewhere
$('#chart').append(legend);
You'll also need to add some basic css to get it looking ok.
Source: stackoverflow.com
Related Query
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chart.js how to show cursor pointer for labels & legends in line chart
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS How to set max labels for X axis?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Chart is too big. How can I reduce size for the chart in vue js?
- Setting Common labels and background color common for all the charts in ChartJs
- Chartjs - Add backgroundColor for labels radar chart
- how can i modify scale labels in angular chart js?
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- how can i reset chartjs object all instances and recreate it from scratch?
- How can I have different values for the chart and the tooltip in chart.js?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- How to get labels on ChartJS Pie chart segments
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- how labels in chartjs can make data invisible
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- How to show the chartjs bar chart data values labels as text?
- Chartjs : Can I overwrite bar value on hover for every bar chart
- How I can increase the number of colors for bar labels in ChartJS?
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- how can i show labels and value in both on bar chart
More Query from same tag
- How do we put labels on pie chart arcs - chart.js/vue-chart.js
- How set color family to pie chart in chart.js
- Chart.js - Font only renders after you reload the canvas
- How to unregister chartjs-plugin-labels globally?
- Changing Fonts In Javascript's CanvasJS
- Is there a way to hide/customize ChartJS' above legend?
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Chart.js - draw horizontal line based on a certain y-value
- Call chartjs in rhino using java
- Linear x axis for bar chart chartjs
- How to add images to chart labels with vue-chartjs?
- How to control the over riding of Y-axis values in Chart.js when more entries inserted using PHP?
- Timeline on Y axis, with chart.js
- Change color of X axis values to multi color values - Chart.js
- How to make rectangle in chart.js
- Why is ChartJS skipping an xAxis label in this snippet?
- How to make bar shape like bell curve in angular-chart?
- How to toggle one of multiple y axis on chart.js
- Meteor and ChartJS dynamically create a chart
- Multiple charts in background ChartJS
- VueJS + Chartjs - Chart only renders after code change
- First point on scatter plot on JavaScript chart.js not showing
- How to hide row in chartJS when filtering?
- Html chart does not fit a small Android WebView
- displaying bar chart in laravel
- Generate multiple line charts in Django with ChartJS
- Chartjs - Doughnut chart with multi layer and running value
- Accessing a slice of a react-chartjs Pie chart
- Bootstrap modal not working with chartjs line graph