sridharan sridharan - 13 days ago 14
TypeScript Question

Change legend position of ng-charts (using angular2)

How do I change the position of the legend (that by default appears on top of the chart)? I'm using

ng-charts
, and I'm trying to change the position according to the documentation, but it does not seem to be working.

chart

The template contains this:

<canvas baseChart
[datasets]="datasets"
[labels]="labels"
[chartType]="type"
[colors]="colors"
[legend]="legend"
[position]="position">
</canvas>


And the component variables are:

labels: string[] = [ 'EMI', 'Food', 'Fuel', 'bike' ];
type: string = 'doughnut';
legend: boolean = true;
position: string = 'left';
colors: Color[] = [{}];

datasets: any[] = [{
data: [ 3350, 5450, 4100, 1000 ],
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' }
}