Простой вопрос, заданный в теме - я боролся с этим пару часов, гуглял и играл с кодом, но не могу найти никакого решения.
БОНУСНЫЙ вопрос: Как я могу отформатировать легенду, чтобы каждая метка была в отдельной строке?
Итак, первая картинка показывает, что мне удалось создать:
https://imgur.com/GDASyiV
В то время как второй показывает, что я хочу сделать:
https://imgur.com/34nneia
Ниже кода:
HTML
[data]="pieChartData"
[labels]="pieChartLabels"
[chartType]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
[colors]="pieChartColors"
[legend]="pieChartLegend">
</canvas>
.TS
export class AppComponent {
// Pie
public pieChartOptions: ChartOptions = {
responsive: true,
plugins: {
datalabels: {
align: 'top',
color: ['white', 'rgba(59,97,25,1)'],
/* formatter: function (value){
return Math.round (value) + '%';
}, */
font: {
family: 'sans-serif',
weight: 'normal',
size: 19,
}
}
},
legend: {
position: 'bottom',
fullWidth: true,
display: true,
labels: {
fontSize: 14,
boxWidth: 15,
padding: 10
}
},
elements: {
arc: {borderWidth: 0}
},
layout: {
padding: {
bottom: 0
}
},
};
public pieChartLabels: Label[] = ['Sklepy aktywne', 'Wszystkie sklepy'];
public pieChartData: SingleOrMultiDataSet = [124, 590];
public pieChartType: ChartType = 'pie';
public pieChartLegend = true;
public pieChartPlugins = [pluginDataLabels];
public pieChartColors = [
{
backgroundColor: ['rgba(59,97,25,1)', 'rgb(190, 198, 185)']
}
];
constructor() {
monkeyPatchChartJsTooltip();
monkeyPatchChartJsLegend();
}