How to add click event on Y-axis label in Gantt chart. It's working fine in javascript but not in angular. In angular giving following error "Type '{ events: { click: () => void; }; }' is not assignable to type 'YAxisLabelsOptions'. Object literal may only specify known properties, and 'events' does not exist in type 'YAxisLabelsOptions'". Using 9.3.x version of the highcharts lib. enter image description here

https://stackblitz.com/edit/highcharts-angular-gantt-jxcjsz?file=src/app/app.component.ts

CodePudding user response：

The highcharts-custom-events module doesn't extend types for Highcharts, so you need to create your own types. For example:

interface ExtendedYAxisLabelsOptions extends Highcharts.YAxisLabelsOptions {
  events: YAxisLabelsEvents
}

interface YAxisLabelsEvents {
  click(): void;
}

export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: Highcharts.Options = {
    ...,
    yAxis: {
      labels: {
        events: {
          click: function() { console.log(this) } 
        } 
      } as ExtendedYAxisLabelsOptions, 
      ...
    }
  };
}

Live example: https://stackblitz.com/edit/highcharts-angular-gantt-jyyhro?file=src/app/app.component.ts