Ng2-charts: How to change legend position ?

Created on 23 Nov 2016  ·  9Comments  ·  Source: valor-software/ng2-charts

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';
```

Most helpful comment

@sridharan31 , @SergeyKuryatnick , actually, the position can be tuned in ng2-charts:

public barChartOptions:any = {
    legend: {position: 'bottom'}
}

All 9 comments

@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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shenriksen4 picture shenriksen4  ·  3Comments

martinpinto picture martinpinto  ·  3Comments

egervari picture egervari  ·  4Comments

vmironovs picture vmironovs  ·  3Comments

tssobe picture tssobe  ·  4Comments