[Chartjs]-Changing legend text in chart js causing issues

by

1👍

✅

A better approach would be to use a custom generateLabels function like so:

var ctx = document.getElementById("canvas").getContext("2d");

window.myBar = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['red - some other text that appears after', 'blue - some other text that appears after', 'green - some other text that appears after', 'orange - some other text that appears after'],
    datasets: [{
      data: [4, 2, 10, 3],
      backgroundColor: ['red', 'blue', 'green', 'orange'],
    }],
  },
  options: {
    responsive: true,
    legend: {
      labels: {
        generateLabels: function(chart) {
          const data = chart.data;
          if (data.labels.length && data.datasets.length) {
            return data.labels.map(function(label, i) {
              const meta = chart.getDatasetMeta(0);
              const style = meta.controller.getStyle(i);

              return {
                text: label.split(' - ')[0],
                fillStyle: style.backgroundColor,
                strokeStyle: style.borderColor,
                lineWidth: style.borderWidth,
                hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,

                // Extra data used for toggling the correct item
                index: i
              };
            });
          }
          return [];
        }
      }
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

<div style="width: 100%">
  <canvas id="canvas"></canvas>
</div>

Leave a comment