sridharan sridharan - 11 days ago 11
TypeScript Question

change legend position chart.js using angular2

how to change the position of the legend its default appear on top of the chart.
i m using ng-chart, As per document try to change the position but not working

enter image description here

Html file

<canvas baseChart
[datasets]="datasets"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[colors]="colorsEmptyObject"
[legend]="barChartLegend"
[position]="doughnutposition"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>


File.ts

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';
colorsEmptyObject: Array<Color> = [{}];
public datasets: any[] = [
{
data: this.data,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}];

Answer

As per the readme of ng2-charts, you can use options to change any properties not exposed by ng2-charts itself.

Add [options]="options" to your template, and an options variable to your component:

private options: any = {
  legend: { position: 'left' }
}
Comments