How Align Legend Chart.js 2

by Luis Custodio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<div class="chart-fields">
  <h3>Origem do Lead</h3>
  <canvas id="field-0" width="260" height="400"></canvas>
</div>

CSS

html, body {
  font-family: 'Roboto', sans-serif;
}

.chart-fields {
  height: 450px;
  background-color: #fff;
  padding: 10px;
  width: 260px;
  float: left;
}

.chart-fields h3 {
  background-color: #444;
  color: #fff;
  font-size: 15px;
  padding: 10px;
  margin: -10px -10px 20px -10px;
}

JavaScript

Chart.defaults.global.defaultFontFamily = "'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.legend.position = 'bottom';
Chart.defaults.global.legend.labels.usePointStyle = true;
Chart.defaults.global.legend.labels.boxWidth = 15;
Chart.defaults.global.tooltips.backgroundColor = '#000';

isArray = Array.isArray ?
    function (obj) {
      return Array.isArray(obj);
    } :
    function (obj) {
      return Object.prototype.toString.call(obj) === '[object Array]';
    };

getValueAtIndexOrDefault = (value, index, defaultValue) => {
    if (value === undefined || value === null) {
      return defaultValue;
    }

    if (this.isArray(value)) {
      return index < value.length ? value[index] : defaultValue;
    }

    return value;
  };

var colors = [
  ['rgba(101, 187, 166, 1)', 'rgba(101, 187, 166, 0.4)'],
  ['rgba(108, 185, 189, 1)', 'rgba(108, 185, 189, 0.4)'],
  ['rgba(128, 153, 186, 1)', 'rgba(128, 153, 186, 0.4)'],
  ['rgba(143, 140, 189, 1)', 'rgba(143, 140, 189, 0.4)'],
  ['rgba(159, 119, 184, 1)', 'rgba(159, 119, 184, 0.4)'],
  ['rgba(166, 103, 160, 1)', 'rgba(166, 103, 160, 0.4)'],
  ['rgba(181, 94, 120, 1)', 'rgba(181, 94, 120, 0.4)'],
  ['rgba(197, 77, 94, 1)', 'rgba(197, 77, 94, 0.4)'],
  ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'],
  ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'],
  ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)']
];

var pieColors = [
  colors[0][0],
  colors[1][0],
  colors[2][0],
  colors[3][0],
  colors[4][0],
  colors[5][0],
  colors[6][0],
  colors[7][0],
  colors[8][0],
  colors[9][0],
  colors[10][0]
];

// BEGIN PIE CHART

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:...