sridharan sridharan - 1 month ago 25
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


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[] = [
backgroundColor: [
hoverBackgroundColor: [


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' }