CODEWITHSUNDEEP
javascriptchart.jsvue-chartjs
skr
skr

Reputation: 1811

How do we put labels on pie chart arcs - chart.js/vue-chart.js

I am using VueChart js/ chart js to create a pie chart in my vue project, I would like to show % of data inside the each arcs, how do we do it? My code in Vue:

fillData() {
  this.datacollection = {
    labels: ['T', 'W', 'R', 'B'],
    datasets: [
      {
        backgroundColor: [
          'rgb(51,122,183)',
          'rgb(226,142,65)',
          'rgb(0,169,157)',
          'rgb(217,83,79)',
        ],
        data: [
          this.tw.length,
          this.w.length,
          this.r.length,
          this.b.length,
        ],
        hoverBackgroundColor: ['#0275d8', '#f0ad4e', '#5cb85c', '#d9534f'],
      },
    ],
  };
  this.options = {
    responsive: true,
    maintainAspectRatio: false,
    devicePixelRatio: 2,
    tooltips: {
      enabled: true,
    },
    title: {
      display: true,
      text: 'Arcs state %',
      position: 'bottom',
      fontSize: 20,
    },
  };
},

UPDATE I tried the plugin recommended by @zb22 and this but it's not working. I did install the plugin through npm

 this.options = {
    plugins: {
      labels: {
        render: 'percentage',
        fontColor: ['white', 'white', 'white'],
        precision: 2,
      },
    },
  };

I have something like below, and it shows data only when I hove over each arc

enter image description here

My aim is to display my chart as below:

enter image description here

Upvotes: 1

Views: 2186

Answers (2)

skr
skr

Reputation: 1811

Chart js supported plugins page does have a solution for it, it is this plugin chartjs-plugin-datalabels . Make sure you import the module in main.js as like

import labels from 'chartjs-plugin-datalabels';

and then 

Vue.use(labels)

and update your Vue page :

this.options = {
    plugins: {
      labels: [
        {
          render: 'value',
        }
      ],
    },
  };

Update: A easier to use module/plugin as mentioned by @zb22 is plugin chartjs-plugin-labels

If you are using vue just import it in your Vue component like

import 'chartjs-plugin-labels';

and use it like 

 this.options = {
    plugins: {
      labels: [
        {
          render: 'percentage',
          fontColor: ['green', 'white', 'red'],
          precision: 2,
        }
      ],
    },
  };

Upvotes: 0

zb22
zb22

Reputation: 3231

You can use a plugin to achieve this: https://github.com/emn178/chartjs-plugin-labels

It's well known for this purpose.

This is a demo

Upvotes: 2

Related Questions