Пользовательская легенда в Chart.js 2.1.3

Question

Есть ли способ передвижения и управления легендой в круговой диаграмме для Chart.js? В частности, я хочу переместить его влево или вправо от моей круговой диаграммы и использовать ее в стиле списка вместо встроенного. Я вижу в документации, что только позиции сверху или снизу, так что я пытался скрываться легенду по умолчанию с

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

А потом строить мое с

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

Но это не создает цветную легенду которые соответствуют диаграмме.

тока 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

При добавлении пользовательского элемента легенды вашего выбора, вам нужно добавить CSS для этого элемента. Как только вы добавите его, будут показаны цветные прямоугольники.

В вашем случае вам нужно добавить ниже класс css в элемент div.

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