Chartjs-Add value to the labels on chartnewjs legend

by

0đź‘Ť

I just had the same problem and played with some time with overriding the “legendTemplate” option. I seems that the default legendTemplate uses the invalid variable “datasets” which should be now “segments”.

So the solution could look like the following:

  1. copy default value for legendTemplate
  2. replace all “datasets” with “segments”
  3. add “<%=segments[i].value%>” to the end

Example:

  myNewChart = new Chart(chartContext).Pie(data, {
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].strokeColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%>  <%=segments[i].value%><%}%></li><%}%></ul>"
        });

Sadly, I couldn’t fix the css for the legend so the color coding etc. won’t display.

Leave a comment