Chartjs-How to add the value for each label to pie legend

by

2👍

✅

You can set the legend template to include the value next to the label like;

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%> : <%=segments[i].value%> <%}%></li><%}%></ul>",

var pieData = [{
    value: 24.8,
    color: "#40af49",
    label: "African American"
}, {
    value: 2.9,
    color: "#ac558a",
    label: "Other"
}, {
    value: 5.7,
    color: "#f05541",
    label: "Multi-Racial, Not Hispanic"
}, {
    value: 19.1,
    color: "#3ac2d0",
    label: "Hispanic/Latino"
}, {
    value: 6.5,
    color: "#faaf3c",
    label: "Asian"
}, {
    value: 41,
    color: "#4287b0",
    label: "White/Caucasian"
}];

var helpers = Chart.helpers;
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%",
    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%> : <%=segments[i].value%>% <%}%></li><%}%></ul>",
    animateRotate: true
});
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.generateLegend();

// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function (legendNode, index) {
    helpers.addEvent(legendNode, 'mouseover', function () {
        var activeSegment = race.segments[index];
        activeSegment.save();
        race.showTooltip([activeSegment]);
        activeSegment.restore();
    });
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function () {
    race.draw();
});

race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>

EDIT:

if you would like to display the percentage the value represents you can access the total within the template like so

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%> : <%=(segments[i].value/total)*100%>% <%}%></li><%}%></ul>",

var data = [{
    value: 301,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
}, {
    value: 120,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}, {
    value: 0,
    color: "#3BA5D9",
    highlight: "#3BA5D9",
    label: "Blue"
}]






//canvases
var chart = document.getElementById("chart").getContext("2d");

var helpers = Chart.helpers;
//charts
var myChart = new Chart(chart).Doughnut(data, {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
    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%> : <%= Math.floor(((segments[i].value/total)*100)+0.5) %>% <%}%></li><%}%></ul>",
    animateRotate: true
});


var legendHolder = document.createElement('div');
legendHolder.innerHTML = myChart.generateLegend();

// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function (legendNode, index) {
    helpers.addEvent(legendNode, 'mouseover', function () {
        var activeSegment = race.segments[index];
        activeSegment.save();
        race.showTooltip([activeSegment]);
        activeSegment.restore();
    });
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function () {
    myChart.draw();
});

myChart.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="chart"></canvas>

Leave a comment