Chartjs-Chart.js: Truncate Legend's Labels

by

2👍

✅

You can use the generateLabels function as described here.

Please take a look at below runnable sample code and see how it works.

new Chart("myChart", {
  type: 'doughnut',
  data: {
    labels: ["1. Red", "2. Blue", "3. Yellow"],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      weight: 0.6
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => chart.data.labels.map((l, i) => ({
            datasetIndex: 0,
            index: i,
            text: l.substr(3),
            fillStyle: chart.data.datasets[0].backgroundColor[i],
            strokeStyle: chart.data.datasets[0].backgroundColor[i],
            hidden: false
          }))
        }
      }
    }
  }
});
canvas {
  max-height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment