1

I have a project where I would love to have several pages/reports complemented with pie charts. I'm already using other ChartJS powered charts in the application and love them, but the pie chart is pretty useless as it is since it doesn't feature labels by default, apparently.

So, is there any working solution to add them WITHOUT having to mess around in the ChartJS core files? I've already stumbled upon various 'solutions' using Google but they are either outdated (mentioning replaces of parts of code that are no longer there) or they require editing in the core files. I'm using the latest ChartJS version, 1.0.1.

Leroy Gerrits
  • 33
  • 1
  • 6

2 Answers2

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!

Jeannie
  • 135
  • 3
  • 13
  • This is for generating legends, not labels. Though I've had my fair share of trouble with that before as well, as ChartJS' default config from the documenation generates an error (the legendTemplate property, to be exact) when using Pie charts. What I need are the labels on the pie chart segments, much like how this Google Chart API example displays percentages as labels: https://developers.google.com/chart/interactive/docs/gallery/piechart – Leroy Gerrits Feb 03 '15 at 07:19
  • I misunderstood the question - sorry. I see what you're saying... the Google Chart API does a good job of determining if there's room for a text label. I'm not sure why chart.js doesn't do this. Again, sorry for misunderstanding. – Jeannie Feb 03 '15 at 14:08
  • A possible solution, but I haven't tried it http://stackoverflow.com/questions/16590301/how-to-add-labels-into-chart-js-canvas-plugin – Jeannie Feb 03 '15 at 17:38
  • Well, that's the thing. That link is one of the many I stumbled upon, but the solution seems to be outdated. I can no longer find the referenced lines of code in the core ChartJS file, not to mention the fact that having to edit a core file is a dirty quick fix; once ChartJS gets updated this fix will become overwritten again, after all. – Leroy Gerrits Feb 04 '15 at 09:47
  • You're absolutely right. And that hack was for a previous version which became unusable in the latest version. It looks like developers recently assigned this as an enhancement https://github.com/nnnick/Chart.js/issues/735 – Jeannie Feb 04 '15 at 14:13
1

Check this if it helps you:

$scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
}
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Mohit K
  • 247
  • 2
  • 7