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%)",
        "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());

It looks decent:

...but I want the pie on the left and the legend on the right, with the legend vertically stacked. How can I accompilish that objective?

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 it makes no difference whatsoever.

UPDATE 2

Fixing the bad ID caused the new legend to display, and adding the "display: false" to the options caused the original one to disappear, but the new one still appears below the pie, crowding outside of its div and bleeding into the quadrant below it (shown hovering over bananas):

UPDATE 3

Here's how it looks with the accepted answer's code applied:

The pie is still puny, but this is much better than it was (and answers the question).

Dorison

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;
    }

Wiggler

Fixing the ID selector causes the legend to display, but below the pie; I need it to the right -there's not enough room below it, and so it bleeds into the quadrant below. – Dorison

@B.ClayShannon that's because the canvas is responsive. The trick is to put the canvas inside a div and set the div's height and width. And then set that container and the legend to display: inline-block. Check it out here. – Wiggler

It is inside a div - a Boostrapified div that takes half of the width of the usable part of the page. I'll czech out your suggestion... – Dorison

@B.ClayShannon Here is bootstrap version of what I am talking about. – Wiggler

Why don't you add your bootstrap code to your answer; it works pretty good; I just removed the border and background color from the #kpi CSS, and changed height as needed (down to 320px), and it looks pretty good. Not perfect, because the pie itself is kind of puny, and the legend has the superfluous "unordered list" bullet points, but good enough that I will mark it as the answer once you copy that code into your answer. – Dorison

@B.ClayShannon Thanks, it's kind of hacky but you can play with the dimensions and what not to get something manageable. To get rid of the bullet points notice my last CSS rule in my updated answer. – Wiggler

Awesome; I don't know why the pie is so puny, but it's much better than it was. I will award you a bounty ASAP, but that won't be until next week, because I'm heading for the hills in a couple of hours. – Dorison

If you feel up to it and have time, czech out this one: #39646820 – Dorison

Answer 2

Another way to right align the legend is to add:

legend: {
   position:"right"
}

To the Chart options

JSfiddle

Toboggan