Each label of the chartjs pie chart's legend on a new line

Question

I have a pie chart using chart.js 2.0. (jsfiddle)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7],
    }]
  },
  options:  {
    legend: {
      display: true,
      position: 'top'
    }
  }
});

I wanna to determine the best way to place legend's labels on top-left position and each label will be on a new line:

What is the simplest way to do this? Is it possible to do this out of the box?

After reading the documentation, I found generatelabels function which generates a legend that we can use and assign to an DOM element and stylize and etc... But it seems to me that this is a difficult way and I believe that there is easier.

Answer 1

This is a hack but a satisfactory and dirt-cheap one, until better support is provided officially. Just append a long string of spaces eg. " " to the end of each label string.

This should successfully force the labels to be formatted one-per-line. Ideally this should be used with align: 'start' (v2.9+)