Legenda personalizzata in Chart.js 2.1.3

C'è un modo per spostare e manipolare la leggenda nel grafico a torta per Chart.js? In particolare vorrei spostarlo a sinistra oa destra del mio grafico a torta e farlo in un elenco-stile invece di inline. Vedo nella documentazione che le posizioni solo sono in alto o in basso in modo da ho provato a hide la leggenda predefinita con

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

E poi build il mio

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

Ma questo non genera le caselle legenda colorate che corrispondono al grafico.

javascript attuale:

 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> 

Quando aggiungi la leggenda personalizzata a un elemento a scelta, è necessario aggiungere anche CSS per quell'elemento. Una volta aggiunto le caselle colorate saranno mostrate.

Nel tuo caso è necessario aggiungere sotto class css l'elemento div .

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