Can't create the legend box.

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 😃

[nnnick]

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();

[lakshyamathur1]

Hello, can you please resolve my issue as quickly as possible:- I am using canvas ng-2 doughnut chart

see my legends are currently coming in the shape as shown in the image but the need is to show the legends in the shape of a circle… so please help:-

in short I want

in the shape of circle