CODEWITHSUNDEEP
angularchartsng2-charts
Chris
Chris

Reputation: 1304

Customizing Legend Shape in ng2-charts

I am working on Pie Chart in ng2-charts. I am trying to customize the default shape of legend. I could change the position of legend but Is it is possible to change the shape? Does it have any inbuilt property or we have to customize?

HTML

<div class="chart">
      <canvas baseChart
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [chartType]="pieChartType"
        [options]="pieChartOptions"
        [plugins]="pieChartPlugins"
        [colors]="pieChartColors"
        [legend]="pieChartLegend">
      </canvas>
    </div>

TS

 public pieChartLabels: Label[] = [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'];
  public pieChartData: number[] = [300, 500, 100];
  public pieChartType: ChartType = 'pie';
      public pieChartOption: any = {
        legend: {
          position: 'right',
          labels: {
            fontSize: 10
          }
        }
      }

What I want
Expected o/p

What I am getting

o/p

Upvotes: 10

Views: 9583

Answers (1)

Ved
Ved

Reputation: 746

ng2-charts uses chartjs and in chartjs there is legend.labels.usePointStyle, you have to make it true.

public pieChartLabels: Label[] = [['Download', 'Sales'], ['In', 'Store', 'Sales'], 
'Mail Sales'];
public pieChartData: number[] = [300, 500, 100];
public pieChartType: ChartType = 'pie';
  public pieChartOption: any = {
    legend: {
      position: 'right',
      labels: {
        fontSize: 10,
        usePointStyle: true
      }
    }
  }

Upvotes: 16

Related Questions