How can I make a legend appear to the right of the pie (Chart.JS)?

Question

I create a fairly simple pie chart with Chart.JS as follows:

var data = { labels: [ "Bananas (18%)", "Lettuce, Romaine (14%)", "Melons, Watermelon (10%)", "Pineapple (10%)", "Berries (10%)", "Lettuce, Spring Mix (9%)", "Broccoli (8%)", "Melons, Honeydew (7%)", "Grapes (7%)", "Melons, Cantaloupe (7%)" ], datasets: [ { data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048], backgroundColor: [ "#FFE135", "#3B5323", "#fc6c85", "#ffec89", "#021c3d", "#3B5323", "#046b00", "#cef45a", "#421C52", "#FEA620" ] } ] }; var optionsPie = { responsive: true, scaleBeginAtZero: true, tooltips: { callbacks: { label: function (tooltipItem, data) { return data.labels[tooltipItem.index] + ": " + formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]); } } } }; var ctx = $("#top10ItemsChart").get(0).getContext("2d"); var top10PieChart = new Chart(ctx, { type: 'pie', data: data, options: optionsPie }); $("#top10Legend").html(top10PieChart.generateLegend()); 

He looks decent:

... but I want the pie on the left and the legend on the right, with the legend vertically laid. How can I accompany this goal?

UPDATE

I tried this:

CSS

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

HTML

 <div id="pie_legend" class="pieLegend"></div> 

... as suggested in the accepted answer here , but that doesn't make any difference.

UPDATE 2

Elimination of the bad identifier led to the emergence of a new legend and the addition of “display: false” to the parameters, due to which the original file disappeared, but the new one still appears under the pie, forcing it outside the div and bleeding the quadrant under it (shown on the ferry over bananas):

UPDATE 3

Here's what it looks like with the accepted accepted response code:

The cake is still foaming, but it is much better than it was (and answers the question).

Answer 1

You must disable the standard legend in the parameters first:

 legend: { display: false }, 

Also your id selector for your legend was wrong. Fiddle

Wrap the chart in a <div> and set its height and width, as the canvas will respond to its container, and then set the div canvas and the div legend as display:inline-block .

HTML

 <div id="kpi"> <div id="container"> <canvas id="top10ItemsChart"></canvas> </div> <div id="top10Legend" class="pieLegend"></div> </div> 

CSS

  #kpi{ height: 400px; width: 100%; border: 1px solid black; background-color: white; } .pieLegend li span { display: inline-block; width: 12px; height: 12px; margin-right: 5px; } #top10Legend { display: inline-block; } #container { display: inline-block; height: 50%; width: 50%; } #top10Legend>ul{ list-style:none; } 

Answer 2

Another way to align the legend is to add:

 legend: { position:"right" } 

To chart options

Jsfiddle