[Chartjs]-How do we put labels on pie chart arcs – chart.js/vue-chart.js

0👍

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,
        }
      ],
    },
  };

2👍

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

Leave a comment