Is it possible to display label names and values around the graph near the datasets segment? I have implemented a formatter function, but it is not returning the expected results. If you check my requirement here, you'll see what I'm aiming for. Currently, the graph is displaying as shown in this image, but the labels and values are not being returned as intended.
import { Component, OnInit } from '@angular/core';
import { Chart, ChartOptions, ChartDataset, ChartConfiguration } from 'chart.js';
import 'chartjs-plugin-datalabels';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
chart: Chart;
ngOnInit(): void {
this.createChart();
}
createChart(): void {
const data: ChartDataset[] = [
{
data: [10, 20, 15, 5, 50],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
},
];
const options: ChartOptions = {
plugins: {
datalabels: {
formatter: function (value, context) {
const label = context.chart.data.labels[context.dataIndex];
return label + ': ' + value + '%';
},
anchor: 'end',
align: 'end',
offset: 10,
color: 'black',
font: {
size: 12,
},
},
},
};
const config: ChartConfiguration = {
type: 'doughnut',
data: {
datasets: data,
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: options,
};
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
this.chart = new Chart(canvas, config);
}
}