Basic Area EChart not compiling with ngx-echarts?

Question

I'm trying to get the basic area echart working on Stackblitz with ngx-echarts.

I've installed ngx-echarts and imported the module. I've added the options to app.component.ts like this:

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};

And declared the chart in app.component.html.

<div echarts [autoResize]="false" [options]="option" class="demo-chart"></div>

And it produces this very long error:

Type '{ xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { type: string; }; series: { data: number[]; type: string; areaStyle: {}; }[]; }' is not assignable to type 'EChartsOption'.
Types of property 'xAxis' are incompatible.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAXisOption | XAXisOption[]'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { ...; }'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'CategoryAxisBaseOption'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"category"'.

Any ideas?

Answer 1

OK figured it out. Apparently the property holding the chart configuration has to be initialized in ngOnInit in order for the chart to render.

Here's a working demo.

https://stackblitz.com/edit/angular-ivy-fubqan?file=src%2Fapp%2Fapp.component.ts