TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts

Question

I'm getting a TypeError: Cannot read property 'legend' of undefined when trying to display example data for a chartjs chart in angular.

I've tried using different examples or chart types, but it keeps throwing this error.

HTML:

<div class="chartwrapper">
  <canvas baseChart class="chart"
          [datasets]="arbarChartData"
          [labels]="arbarChartLabels"
          [options]="arbarChartOptions"
          [legend]="arbarChartLegend"
          [chartType]="arbarChartType">
  </canvas>
</div>

TS:

public arbarChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public arbarChartType = 'bar';
public arbarChartLegend = true;
public arbarChartData: ChartDataSets[] = [
  {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];

remove `[legend]="arbarChartLegend"` from html. In **TS** `arbarChartOptions: any = { legend: { display: true, labels: { fontColor: 'black' } }` — Chris, May 03 '19 at 10:25

score 6 · Accepted Answer · answered May 06 '19 at 06:42

6

Remove [legend]="arbarChartLegend" from your html.

In TS, arbarChartOptions: any = { legend: { display: true, labels: { fontColor: 'black' } }

answered May 06 '19 at 06:42

Chris

1,236
2
18
34

I solved my problem by installing `ng2-charts-x` package which is used to solve some problems of `ng2-chart`. – Amir Choubani May 21 '19 at 13:21

score 3 · Answer 2 · answered Mar 09 '20 at 07:52

For me it was enough to initialise empty arbarChartOptions like:

public arbarChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public arbarChartType = 'bar';
public arbarChartLegend = true;
public arbarChartData: ChartDataSets[] = [
  {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
public arbarChartOptions: ChartOptions = {}

to solve the error

TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts

2 Answers2