Chart.js: Can't create the legend box.

6c7035ba-0624-11e4-89b9-8ce0ab35f241

Hi, Sorry, i know that the question has already been asked, but the answer is not clear to me. I am unable to reproduce something like this showing on the homepage of chart.js.

My Doughnut chart appears, but i don’t know how to add the legend. What do you mean here (https://github.com/nnnick/Chart.js/issues/428) by : “It’s up to you to put that HTML into your DOM somewhere and style it accordingly.” ?

window.onload = function(){
          var ctx = document.getElementById("chart-area").getContext("2d");
          window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
            responsive : true,
    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>"
          });
          myDoughnut.generateLegend();
        };

What’s the problem ? Many thanks by the way 😃

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

myDoughnut.generateLegend(); returns a string of HTML.

You can then put that HTML somewhere on your page, then use CSS to style it.

So, if you had a div with the id my-doughnut-legend, you could do something like this:

document.getElementById('my-doughnut-legend').innerHTML = myDoughnut.generateLegend();

nnnick on Aug 6, 2014