How to use click event on Y-axis label in angular Gantt chart High Chart

user_17436320 0
Viewed 243

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%2Fapp%2Fapp.component.ts

angular gantt-chart highcharts
1 Answers

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%2Fapp%2Fapp.component.ts

user_89513770
Related