how to change the position of the legend its default appear on top of the chart, As per document tried public doughnutposition:string= 'left'; change the position but not working
```
[datasets]="datasets"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[colors]="colorsEmptyObject"
[options]="barChartOptions"
[position] ="doughnutposition"
[legend]="barChartLegend"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
public doughnutChartLabels:string[] = ['EMI', 'Food', 'Fuel', 'bike'];
data:number[] = [3350, 5450, 4100, 1000];
public doughnutChartType:string = 'doughnut';
private barChartLegend:boolean = true;
public doughnutposition:string= 'left';
```
@sridharan31 Hey, ng2-charts uses default position for legend, that calculated in chart.js.
so you cannot tune legend position in ng2-charts settings
Default settings for legend in chart.js(node_modules/chart.js/src/core/core.legend.js) is set for top:
Chart.defaults.global.legend = {
display: true,
position: 'top',
fullWidth: true,
reverse: false,
}
@sridharan31 , @SergeyKuryatnick , actually, the position can be tuned in ng2-charts:
public barChartOptions:any = {
legend: {position: 'bottom'}
}
Thanks @JanPeeters !
guys, I'm able to bring the legend from the default top position to bottom using:
public options: any = {
legend: {position: 'bottom'},
};
however, I need it at a bottom right corner.. how can i do that? tried doing:
legend: {position: 'bottom right'}
but to no avail!
@gshashikant Did you find a solution? I want to keep it at the top left. Is it possible?
There is no clear solution, actually this is a chartjs limitation.
The legend is defined by the generateLabels function that only allows top|bottom|left|right
http://www.chartjs.org/docs/#chart-configuration-legend-configuration
see I am using doughnut charts and I am getting values from backend so now the need is to filter those values in descending order .....so how to sort the values of labels?
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'right',
data: ['西凉', '益州','兖州','荆州','幽州']
},
bạn có thể dùng cái này nhé
guys, I'm able to bring the legend from the default top position to bottom using:
public options: any = {
legend: {position: 'bottom'},
};however, I need it at a bottom right corner.. how can i do that? tried doing:
legend: {position: 'bottom right'}
but to no avail!
Try::
https://www.chartjs.org/docs/latest/configuration/legend.html#align
Most helpful comment
@sridharan31 , @SergeyKuryatnick , actually, the position can be tuned in ng2-charts: