title: How Align the Legend Items in Chart.js 2?
body: <p>I just need to align the <strong>Chart Legend</strong> so it don't look too messy as the default shows, here is an example what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/P4SFZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P4SFZ.png" alt="Chart.js Default Legend Alignment"></a>
  <a href="https://i.stack.imgur.com/ctpu8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ctpu8.png" alt="Chart.js Desire Legend Alignment"></a></p>
  
  <h2>Please give some code suggestions: <a href="https://jsfiddle.net/holp/68wf75r8/" rel="noreferrer">https://jsfiddle.net/holp/68wf75r8/</a></h2>
  
  <pre><code>new Chart(document.getElementById("field-0"), {
    type: 'pie',
    data: {
      labels: ["Chat", "Prospeção", "Whatsapp", "Trial", "Site", "Telefone", "E-mail", "Evento"],
      datasets: [{
        data: [700, 400, 200, 150, 80, 50, 20, 10],
        borderWidth: 2,
        hoverBorderWidth: 10,
        backgroundColor: pieColors,
        hoverBackgroundColor: pieColors,
        hoverBorderColor: pieColors,
        borderColor: pieColors
      }]
    },
    options: {
      legend: {
        labels: {
          padding: 20
        }
      }
    }
  });
  </code></pre>