How Align the Legend Items in Chart.js 2?

Question

I just need to align the Chart Legend so it don't look too messy as the default shows, here is an example what I'm trying to achieve:

Please give some code suggestions: https://jsfiddle.net/holp/68wf75r8/

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
      }
    }
  }
});

Answer 1

There is legend.labels.generateLabels hook you generally can use to customise your legend labels. I found out, that you can put something like below to adjust Chart.js calculations.

generateLabels:  function (chart) {
    chart.legend.afterFit = function () {
      var width = this.width; // guess you can play with this value to achieve needed layout
      this.lineWidths = this.lineWidths.map(function(){return width;});

    };
    // here goes original or customized code of your generateLabels callback
}

Weird thing that there is no actual configuration option to achieve this.

Answer 2

Chartjs v2 creates an overhead to handle the legends. Basically what you are looking for is to leverage the usage of generateLabels.

The key point to bare in mind is that you need to return an valid array of legend objects.

This plunker describes the solution.

Main focus on this part:

generateLabels: (chart) => {

  chart.legend.afterFit = function () {
    var width = this.width; 
    console.log(this);

    this.lineWidths = this.lineWidths.map( () => this.width-12 );

    this.options.labels.padding = 30;
    this.options.labels.boxWidth = 15;
  };

  var data = chart.data;
  //https://github.com/chartjs/Chart.js/blob/1ef9fbf7a65763c13fa4bdf42bf4c68da852b1db/src/controllers/controller.doughnut.js
  if (data.labels.length && data.datasets.length) {
    return data.labels.map((label, i) => {
      var meta = chart.getDatasetMeta(0);
      var ds = data.datasets[0];
      var arc = meta.data[i];
      var custom = arc && arc.custom || {};
      var getValueAtIndexOrDefault = this.getValueAtIndexOrDefault;
      var arcOpts = chart.options.elements.arc;
      var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
      var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
      var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

      return {
        text: label,
        fillStyle: fill,
        strokeStyle: stroke,
        lineWidth: bw,
        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

        // Extra data used for toggling the correct item
        index: i
      };
    });
  }
  return [];
}

Answer 3

I tried to do as advised by the comments above. But to see that it is really difficult. It’s better and easier for me to set:

legend: {display: FALSE, ..} `, and then render the legend using html (angular, react, view .. another render template):

// part of angualr model class
public  dataSets = [{
    label: "New Deals",
    backgroundColor: "#88B2FF",
    data: [26, 15, 5],
  },
  {
    label: "Active Deals",
    backgroundColor: "#397FFF",
    data: [7, 13, 22],
  },
  
  ....
   this.chart = new Chart(ctx, {
      type: "roundedBar",
      data: {
        labels: this.xLabels,
        datasets: this.dataSets,
      },

  <div style="width: 380px;height: 200px; display: inline-block;">
    <canvas id="chart" aria-label="Hello ARIA World" role="img"></canvas>
  </div>
   <!-- This is angular template -->
  <ul class="legend">
    <li *ngFor="let set of dataSets">
      <i [style.backgroundColor]="set.backgroundColor" class="icon"></i>
      <label>
        {{ set.label }}
      </label>
    </li>
  </ul>
  
  <style>
  .legend {
    display: flex;
    text-align: center;
    justify-content: space-between;
    font-size: 10px;
    line-height: 12px;
  }
  .icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
</style>