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 to assign a logarithmic scale to y axis in chart.js?
- Getting chart js bar chart to fill window
- ChartJS set styling on the last point only
- Bubble Chart in Chartjs not working
- chartjs maintain points position, put image alongside with label
- How to pass values to a chart (chart.js / morris.js)
- how to Highlight clicked Doughnut section or portion in chart.js?
- Why is each character displayed on a new line/row?
- Chart.js: Can't get a coordinate for value for x axis unless x axis has the exact same value
- How To Format Scale Numbers in Chart.js v2
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- how to load mysql query to chartjs with php?
- Line Chart is not setting backgroundColor when created dynamically Chart.js
- chart js chart bar chart not showing data from 0
- How do I use plugins in ng2-charts?
- Series Details Not Showing in Angular Chart with Charts.js
- Resizing chart before downloading as image
- Chart.js Cannot read property 'apply' of undefined
- chart.js working fine on my localhost but it is not working online
- chart.js: segment true is not working in labels outside pie chart : chart.piecelabel.js
- How do I add Date range filter in chartjs in the context of Vue.js
- Rendering Chart.js Bubble Chart Using Array Data
- Hide x-axis labels but show tooltips in chart.js
- Dynamically populate array with Firebase Data Vue.js
- annotation line not visible in scatter chart in chartjs
- Class declaration merging for an existing type
- How to add a vertical line on Chart.js when hover a point?
- ChartJs resizing when parent div is resized
- Multiple dynamic vertical lines on a chart with Chart.js