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

Question

I\'m creating a fairly simple pie chart with Chart.JS like so:

var data = {
    labels: [
        \"Bananas (18%)\",
        \"Lettuce, Romaine (14%)\",
                 


        

Answer 1

You have to turn the default legend off in the options first with:

legend: {
        display: false
},

Also your id selector for your legend was wrong. Fiddle.

Wrap the chart in the <div> and set the height and width of that since the canvas will be responsive to its container, then set the canvas's div and the legend's div 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 right align the legend is to add:

legend: {
   position:"right"
}

To the Chart options

JSfiddle