0

I add doughnut char using chart js library and populate data with ajax call. Doughtnut is render correctly but there is no legend. According documentation http://www.chartjs.org/docs/latest/charts/doughnut.html if a label occurred, data is shown in the legend and tooltip but I have only a tooltip. This is my js code.

var pieChartCanvas = $('#pieChartPaid').get(0).getContext("2d");
                        var pieChart = new Chart(pieChartCanvas);
                        var PieData;

                        $.ajax({
                            type: "GET",
                            cache: false,
                            contentType: "application/json; charset=utf-8",
                            url: '@Url.Action("GetPaidInvoice", "Home")',
                            dataType: "json",
                            success: function (data) {
                                PieData = data;
                                var pieOptions = {
                                    //Boolean - Whether we should show a stroke on each segment
                                    segmentShowStroke: true,
                                    //String - The colour of each segment stroke
                                    segmentStrokeColor: "#fff",
                                    //Number - The width of each segment stroke
                                    segmentStrokeWidth: 2,
                                    //Number - The percentage of the chart that we cut out of the middle
                                    percentageInnerCutout: 50, // This is 0 for Pie charts
                                    //Number - Amount of animation steps
                                    animationSteps: 100,
                                    //String - Animation easing effect
                                    animationEasing: "easeOutBounce",
                                    //Boolean - Whether we animate the rotation of the Doughnut
                                    animateRotate: true,
                                    //Boolean - Whether we animate scaling the Doughnut from the centre
                                    animateScale: false,
                                    //Boolean - whether to make the chart responsive to window resizing
                                    responsive: true,
                                    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                                    maintainAspectRatio: true,
                                    //String - A legend template
                                    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>"
                                };                            
                                //Create pie or douhnut chart
                                pieChart.Doughnut(PieData, pieOptions);

And json which a pass is :

    data=[
 {value:300,
color: "#00a65a",
highlight:"#00a65a",
label:"On time"
},
{value:200,
color:"#f39c12" ,
highlight:"#f39c12"
label:"Overdue"
},
...
]

Label is visible only on tooltip, but legend is not generated.

IvoAtanasov
  • 166
  • 2
  • 12
  • Try to add 'legend': {'display':true, 'position':'bottom'} in your pieOption – Rylyn Jun 22 '17 at 12:17
  • No, it 's no working. I assume there is a problem with legendTemplate but I can't figure it out. – IvoAtanasov Jun 22 '17 at 12:29
  • If you are using ChartJS v2, it seems that legendTemplate as been deleted. You now have to use legendCallback as explained here : https://stackoverflow.com/questions/37005297/custom-legend-with-chartjs-v2-0 – Rylyn Jun 22 '17 at 12:52
  • OK, thanks but this callback is a part of pieOptions or a part of pieChart object ? – IvoAtanasov Jun 22 '17 at 14:02
  • According to the docs, it is a part of pieOptions. See here : http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends – Rylyn Jun 22 '17 at 15:51
  • Yes, bu legendCallback is used to override generateLegend().It's use to create sophisticated legend.In my case legend is not generated at all. Perhaps my presentation is not correct. – IvoAtanasov Jun 23 '17 at 06:55

0 Answers0