V6 Annotation Typing issues

[godind]

Reproduction of the problem
Using ng2-chart v6, Angular 17, chart.js 4.4.2

Template

  <canvas [id]="widgetProperties.uuid"
    baseChart class="chart"
    [data]="lineChartData"
    [options]="lineChartOptions"
    [type]="lineChartType"
  ></canvas>

Config

public lineChartOptions: ChartConfiguration['options'] = {
    plugins: {
      annotation: {
        annotations: {
          meanLine: {
            type: 'line',
            scaleID: 'y',
            value: 1,
            borderColor: 'green',
            drawTime: 'beforeDatasetsDraw',
            label: {
              display: true,
              content: "Minimum"
            }
          }
        }
      },
    }
  }

It won't compile. I've also tried to see if it would run anyway.

Line of code with compiler error with @ts-ignore enabled

SyntaxError: /Users/godind/Documents/GitHub/Kip/src/app/widgets/widget-data-chart/widget-data-chart.component.ts: Support for the experimental syntax 'optionalChainingAssign' isn't currently enabled (190:13):

  188 |             });
  189 |             // @ts-ignore
> 190 |             this.chart.options.plugins.annotation.annotations["meanLine"].value = 10;
      |             ^
  191 |             this.chart?.update('none');
  192 |         });
  193 |     }

✖ Failed to compile.

Type script complaint

Not sure how to fix this or if it's a bug. Thanks for your Wonderfull work!

[godind]

The code works fine when using Chart.js as plain js. Have I forgot something?

[santam85]

The generic configuration does not have all plugin types merged in.
Have you tried using ChartConfiguration<'line'>['options'] ?
I assume you have import AnnotationPlugin from 'chartjs-plugin-annotation'; somewhere in your app.

Provide an example repo, as I cannot reproduce this issue.

[godind]

I've not thought of ChartConfiguration<'line'>['options'] ? I assume you have import AnnotationPlugin from 'chartjs-plugin-annotation';

First time with ng2-charts

Thank for the help!