[Chartjs]-Edit legend labels [vue-chart.js]

by

1👍

✅

The labels are just an array of strings, in my case I have:

<doughnut-chart
    :height="100"
    :options="pieChartCustomizations"
    :data="pieChartData"
/>

And the labels are set in the pieChartData which is a computed property that returns:

{
        datasets: [
          /* Outer doughnut data starts */
          {
            data: [this.kpi.activities.total, this.kpi.products.total],
            backgroundColor: [
              'rgb(0, 255, 0)', // green
              'rgb(0, 0, 255)', // blue
            ],
          },
        ],
        //Change customize lablels via a computed property or even directly in the 
        options
        labels: ['Activites', 'Products'],
      };

So you can do whatever you want wit the label values since they’re just strings

Leave a comment