title: Each label of the chartjs pie chart's legend on a new line
body: <p>I have a <strong>pie chart</strong> using <strong>chart.js 2.0</strong>. (<a href="https://jsfiddle.net/rogu/sbr8Luch/1/" rel="noreferrer">jsfiddle</a>)</p>
  
  <pre><code>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'
      }
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZhTwH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZhTwH.png" alt="pie chart"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/x0iTO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x0iTO.png" alt="pichart-goal"></a></p>
  
  <p>What is the simplest way to do this? Is it possible to do this out of the box? </p>
  
  <p>After reading the documentation, I found <a href="http://www.chartjs.org/docs/latest/configuration/legend.html?h=generatelabels" rel="noreferrer">generatelabels</a> 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.</p>