[Chartjs]-Chart JS, ng2-Charts – How to make the label to the right of pie chart instead on top?

by

1👍

✅

First, import ChartOptions object in your component.ts:

import { ChartOptions } from 'chart.js';

Create a new variable with it in your component.ts:

public options: ChartOptions = {
  legend: {
    display: true,
    position: 'right'  // <=========== change this to the position you like.
  },
  title: {
    display: true,
    text: "Employee Details",
  }
  // ... and so on. see below about options
}

Now, in your component.html, add the options variable to <canvas>:

<canvas baseChart
                [data]="monthStatsData"
                [labels]="monthStatsLabel"
                [chartType]="monthStatsType"
                [options]="options" 
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>

Read more about ng2-chart options and customization here

0👍

Don’t know anything about ng2-Charts, but you probably need to add something

[options] = "chartOptions"

to your basechart and

  public chartOptions: legend = {
    position: 'right'
  };

0👍

With latest ng2-charts (v4.0.1) and chart.js, you need to use the following code:

public options: ChartOptions<'pie'> = {
  plugins: {
    legend: {
      position: 'doughnut'
    },
  }
};

Notice legend is under plugins. This can be found in the official documentation:

Specifically, this part:

Namespace: options.plugins.legend, the global options for the chart legend is defined in Chart.defaults.plugins.legend.

Don’t forget to update the template:

<canvas baseChart
        ...
        [options]="options">
</canvas>

I just got it working with Angular 14.

Leave a comment