How Align the Legend Items in Chart.js 2?
<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>