[Chartjs]-How to add legend in pie chart

by

0👍

Give this a shot –

 legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% 
for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:
<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%>
<%=segments[i].label%><%}%></li><%}%></ul>"

Include this as part of your pieOptions.

0👍

Refer this documentation of chart.js for more details on how to use chart.js. For legends there dosent seem to be a simple way but you have an option to give label to each segment in your piechart which will act as your legend.

var myPieChart = new Chart(ctx[0]).Pie(data,options);
var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
    labelColor : 'white',
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green",
    labelColor : 'white',
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow",
    labelColor : 'white',
}
   ]

In this the label acts as your map legend and it looks like the example fiddle piechart using chart.js

Leave a comment