How to add a Data label to the chart built using chart js libraries in LWC

49 views Asked by At

I need add data labels to the pie chart that i built using chartJs in lwc. I tried many ways that i found in the internet but haven't fount any solutions. Any one please share about this.

I tried adding these line to config under options

const config = {
  type: 'pie',
  data: {
    datasets: [{
      data: [],
      backgroundColor: [
        'rgb(255,99,132)',
        'rgb(255,159,64)',
        'rgb(255,205,86)',
        'rgb(75,192,192)',
        'rgb(153,102,204)',
        'rgb(179,158,181)',
        'rgb(188,152,126)',
        'rgb(123,104,238)',
        'rgb(119,221,119)',
      ],
      label: 'Dataset 1'
    }],
    labels: []
  },
  plugins: [chartjsdatalabel],
  options: {
    responsive: false,
    legend: {
      position: 'right'
    },
    plugins: {
      datalabels: {
        color: '#fff',
        formatter: (value, context) => {
          return context.chart.data.labels[context.dataIndex] + ': ' + value;
        }
      }
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
}
0

There are 0 answers