Я создаю довольно простую круговую диаграмму с помощью Chart.JS примерно так:

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());

Выглядит прилично

... но я хочу пирог слева и легенду справа, с легендой, сложенной вертикально. Как я могу достичь этой цели?

ОБНОВИТЬ

Я попробовал это:

CSS

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

HTML

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

... как предложено в принятом ответеВот, но это не имеет никакого значения вообще.

ОБНОВЛЕНИЕ 2

Исправление неверного идентификатора приводило к отображению новой легенды, а добавление «display: false» к опциям приводило к тому, что исходный исчезал, но новый по-прежнему появлялся под круговой диаграммой, вытесняясь за пределы своего div и сливаясь в нижний сектор. это (показано парящим над бананами):

ОБНОВЛЕНИЕ 3

Вот как это выглядит с применением принятого кода ответа:

Пирог все еще крошечный, но это намного лучше, чем было (и отвечает на вопрос).