Custom legend in Chart.js 2.1.3

Question

Is there a way to move and manipulate a legend in a pie chart for Chart.js? In particular, I want to move it to the left or right of my pie chart and use it in list style instead of inline. I see in the documentation that the only positions are above or below, so I tried to hide the default legend with

Chart.defaults.global.legend.display = false; 

And then build your own

 document.getElementById('js-legend').innerHTML = myChart.generateLegend(); 

But this does not create the legend colored fields corresponding to the diagram.

current javascript:

 var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'pie', data: { labels:generatedLabels, datasets: [{ data: dataPoints, backgroundColor: generatedBackgroundColors }] } }); 

HTML:

 <div> <canvas id="myChart"></canvas> </div> <div id="js-legend" class="pieLegend"></div> 

Answer 1

When you add a custom legend to an element of your choice, you also need to add CSS for that element. After adding it, colored rectangles will be shown.

In your case, you need to add the css class below to the div element.

 .pieLegend li span{ display: inline-block; width: 12px; height: 12px; margin-right: 5px; }