0

I'm trying to find the prefect solution for what i need, both labels on the pie and labels at the bottom (legend).

enter image description here

i read a lot and i understand that newchartjs can give me the options to add the labels at the chart but not legend. while i succeeded to add legend on chartjs but not the labels.

any chance i can add both?

which one of the plugins is capable to give labels and legend?

var options = {
     tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%",
     legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li class="legend_label legend_<%=segments[i].label%>"><span style="color:<%=segments[i].fillColor%>"><%=segments[i].label%></span><span style="color:<%=segments[i].fillColor%>"> : </span><span style="color:<%=segments[i].fillColor%>"><%= Math.floor(((segments[i].value/total)*100)+0.5) %>% </span></li><%}%></ul>',
     showTooltips: false
 };
 var ctx = $('#chart_'+index).find('canvas').get(0).getContext('2d');

 var myPieChart = new Chart(ctx).Pie(chart_data,options);
 var helpers = Chart.helpers;
 myPieChart.showTooltip(myPieChart.segments, true);
 var legend = myPieChart.generateLegend();
 $('#chart_'+index).find('.legend').html(legend);
  myPieChart.chart.canvas.parentNode.parentNode.appendChild(legend.firstChild);
user2587454
  • 903
  • 1
  • 19
  • 44
  • using chart js you could combine my two answers for showing labels on load and showing legend with values to have this; http://stackoverflow.com/questions/28727400/how-to-add-the-value-for-each-label-to-pie-legend ; http://stackoverflow.com/questions/28720713/chart-js-show-tooltips-on-page-load ....... would look like this http://fiddle.jshell.net/leighking2/q6x747bo/ – Quince Feb 26 '15 at 08:23
  • Try to look into [Flot.js](http://www.flotcharts.org/flot/examples/series-pie/index.html), it provides this capability. –  Feb 26 '15 at 08:35
  • can't make the labels work. i updated my question so you can see my code – user2587454 Feb 26 '15 at 10:30
  • @user2587454 you have to turn off animation so that the chart does not redraw if you want the labels to be present from the start – Quince Feb 26 '15 at 11:45
  • i don't think i understand how the animation related to the labels. i want something like this - http://jsfiddle.net/nCFGL/223/ – user2587454 Feb 26 '15 at 13:51
  • it's because in chartjs there are no labels (can't see option) so instead you can turn on the tooltips to act as labels. The animation needs to be turned off for this to work because as it animates it clears the canvas and redraws, there is no events fired (as far as i can tell) to see when the animation has ended so the tooltips need to be show at the start without animation so that they stay on the screen. Ill admit this is not the greatest solution (hence comment not an answer) and if you wanted something more robust then edits would need to be made to chartjs to get it working how you want – Quince Feb 26 '15 at 13:59
  • but in the example (http://jsfiddle.net/nCFGL/223/) there is animation + labels – user2587454 Feb 26 '15 at 14:04
  • is that not newchartjs? if not that is a very old version of chartjs as it is no longer structured like that – Quince Feb 26 '15 at 14:24

0 Answers0