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

Question

I am using the chart js https://www.npmjs.com/package/chart.js and ng2-charts https://www.npmjs.com/package/ng2-charts , to render a doughnut chart.

But, I want the label to appear on the right of the doughnut chart, any idea on how do I do that?

  public monthStatsLabel: Label[] = ['Total days', 'Present', 'Leave'];
  public monthStatsData: MultiDataSet = [
    [31,28,2]
  ];
  public monthStatsType: string = 'doughnut';
  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

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

Answer 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