[Chartjs]-How to get labels on ChartJS Pie chart segments

by

1👍

JSFiddle

This was hard for me to find too. And my solution was a little complicated by needing to have multiple charts on the same page. (For that reason, my context and data variables are named a little differently than in the chart.js documentation.)

Essentially, I had to add two things. First, a div to hold the legend and second, add a line to tell chart.js to build a legend there. This second line has to go after the variable declaring the new chart (which I marked up according to the documentation: chartjs.org/docs/#doughnut-pie-chart-example-usage)

Here’s the div:

<div class="chart">
    <canvas id="property_types" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

And here’s the JS:

// jQuery
$("#pie_legend").html(propertyTypes.generateLegend());
// JavaScript
document.getElementById('pie_legend').innerHTML = propertyTypes.generateLegend();

I haven’t worked out getting the tooltips to appear on hover over the li elements, but I’m hopeful the answer is in this GitHub issue: github.com/nnnick/Chart.js/issues/522 where I found my solution to your same problem!

1👍

Check this if it helps you:

$scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
}

Leave a comment