Chartjs-How to add a coloured legend box to a pie chart with Chart.js v1?

by

0👍

✅

You will have to use Chart.js 2.0 to get the legend that you desire. What is the reason you are wanting to use 1.0? It is no longer supported and the last release was Apr 5, 2016.

I highly recommend switching to 2.0 and then you can easily take advantage of the new legends.

If for whatever reason you cannot use 2.0 and must stick to 1.0, then you need to correct your legendTemplate property. Based on the fiddle you provided yours is:

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>"

It’s hard to tell since its a long string, but this HTML template results in an empty <span> which should otherwise contain your dataset label. Remember, an empty span will not render anything even if it has a background color defined. Here is the resulting legend HTML once its rendered to demonstrate what I mean.

enter image description here

Per the Chart.js v1 docs, the correct legendTemplate string should be.

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"

The difference being that the <span> contains the dataset label (and therefore displays correctly with colored background). However, even this default looks pretty bad.

Fortunately, this is just standard HTML and CSS so you can style your legend however you see fit. I would recommend you create a legend in HTML that you like, them convert it to a string and add in the necessary chart.js template expressions (e.g. <% for (var i=0; i<segments.length; i++){%, <%=segments[i].fillColor%>, etc).

Here is a codepen example using a quick legend template that I came up with that looks pretty close to the Chart.js v2 template. For completeness, I’ve also provided the key parts below.

css:

.indicator_box {
  width: 55px;
  height: 5px;
  padding: 5px;
  margin: 5px 10px 5px 10px;
  padding-left: 5px;
  display: block;
  float: left;
}

Template String:

"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li style=\"float: left; clear: both;\"><div class=\"indicator_box\" style=\"background-color:<%=segments[i].fillColor%>\"></div><span style=\"font-size: 20px;\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"

Leave a comment