I'm working with Chart.js and have my chart data formatted like this:
chartData = [
{ data: 2, label: 'Label 1' },
{ data: 10, label: 'Label 2' },
{ data: 40, label: 'Label 3' },
];
I want to create a classic pie chart from this data. Here is an example of what I am aiming for:
https://i.sstatic.net/T5Pi6.png
I've attempted to follow the guidance in the documentation, but it seems unavailable.
This is the template I am using:
<canvas baseChart
[datasets]="chartData"
[type]="pieChartType"
[options]="pieChartOptions">
</canvas>
Here is the TypeScript code associated with it:
chartData = [
{ data: 2, label: 'Label 1' },
{ data: 10, label: 'Label 2' },
{ data: 40, label: 'Label 3' },
];
public pieChartOptions: ChartConfiguration['options'] = {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
datalabels: {
formatter: (value, ctx) => {
if (ctx.chart.data.labels) {
return ctx.chart.data.labels[ctx.dataIndex];
}
},
},
}
};