CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjs
Anas Latique
Anas Latique

Reputation: 408

Edit legend labels [vue-chart.js]

I render a Doughnut chart from vue-chart.js, how can I edit only the legend labels like if I have 'very long string' I want in the legend to display 'very lo...' and keep the labels as they are to be shown on hover in the tooltip.

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      }
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
};

Doughnut Chart

How can I do that?

Upvotes: 1

Views: 3059

Answers (1)

Mr.Toxy
Mr.Toxy

Reputation: 367

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

Upvotes: 1

Related Questions