19

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"
  ]
}];
skreborn
  • 2,133
  • 2
  • 16
  • 27
sridharan
  • 2,011
  • 10
  • 36
  • 61
  • Does this answer your question? [Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?](https://stackoverflow.com/questions/66504543/chart-js-ng2-charts-how-to-make-the-label-to-the-right-of-pie-chart-instead-o) – Victor Zakharov Sep 26 '22 at 18:42

2 Answers2

33

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' }
}
skreborn
  • 2,133
  • 2
  • 16
  • 27
0

With ng-charts version 4.0.1. it's:

private options: any = {
  plugins: { legend: { position: 'left' } }
}
dlwvt
  • 1