sridharan sridharan - 1 year ago 159
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

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


The template contains this:

<canvas baseChart

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: [
hoverBackgroundColor: [

Answer Source

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' }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download