supremeauron
Posts: 9
Joined: Mon Oct 25, 2021 2:19 pm

Gantt and Custom events in Typescript Angular

Good morning,
I'm trying to add the click event to a YAxis label of a Gantt.

By only extending the interface for the YAxis -> Labels, I get the application compiled but the click is not run.

By searching here and there I found an example like this one:
https://stackblitz.com/edit/highcharts- ... mponent.ts

But if I try to do the same, I get an error from typescript:
angular dep.png
angular dep.png (25.83 KiB) Viewed 1117 times
Which is:

Code: Select all

Argument of type 'typeof import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts/highcharts")' is not assignable to parameter of type 'typeof import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts")'.
  Types of property 'chart' are incompatible.
    Type '{ (options: Highcharts.Options, callback?: Highcharts.ChartCallbackFunction): Highcharts.Chart; (renderTo: string | HTMLElement, options: Highcharts.Options, callback?: Highcharts.ChartCallbackFunction): Highcharts.Chart; }' is not assignable to type '{ (options: import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Options, callback?: import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").ChartCallbackFunction): import("C:/...'.
      Types of parameters 'options' and 'options' are incompatible.
        Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Options' is not assignable to type 'Highcharts.Options'.
          The types of 'accessibility.announceNewData.announcementFormatter' are incompatible between these types.
            Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").AccessibilityAnnouncementFormatter' is not assignable to type 'Highcharts.AccessibilityAnnouncementFormatter'.
              Types of parameters 'updatedSeries' and 'updatedSeries' are incompatible.
                Type 'Highcharts.Series[]' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Series[]'.
                  Type 'Highcharts.Series' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Series'.
                    The types of 'chart.axes' are incompatible between these types.
                      Type 'Highcharts.Axis[]' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Axis[]'.
                        Type 'Highcharts.Axis' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Axis'.
                          Types of property 'crosshair' are incompatible.
                            Type 'boolean | Highcharts.AxisCrosshairOptions' is not assignable to type 'boolean | import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").AxisCrosshairOptions'.
                              Type 'AxisCrosshairOptions' is not assignable to type 'boolean | AxisCrosshairOptions'.
                                Type 'Highcharts.AxisCrosshairOptions' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").AxisCrosshairOptions'.
                                  The types of 'label.formatter' are incompatible between these types.
                                    Type 'Highcharts.XAxisCrosshairLabelFormatterCallbackFunction' is not assignable to type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").XAxisCrosshairLabelFormatterCallbackFunction'.
                                      The 'this' types of each signature are incompatible.
                                        Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Axis' is not assignable to type 'Highcharts.Axis'.
                                          The types of 'chart.hoverPoint.dataGroup.options' are incompatible between these types.
                                            Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").SeriesOptionsType' is not assignable to type 'Highcharts.SeriesOptionsType'.
                                              Type 'SeriesAbandsOptions' is not assignable to type 'SeriesOptionsType'.
                                                Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").SeriesAbandsOptions' is not assignable to type 'Highcharts.SeriesAbandsOptions'.
                                                  The types of 'accessibility.point' are incompatible between these types.
                                                    Type 'PlotAbandsAccessibilityPointOptions | PlotAdAccessibilityPointOptions | PlotAoAccessibilityPointOptions | ... 107 more ... | PlotZigzagAccessibilityPointOptions' is not assignable to type 'PlotAbandsAccessibilityPointOptions | PlotAdAccessibilityPointOptions | PlotAoAccessibilityPointOptions | ... 106 more ... | PlotZigzagAccessibilityPointOptions'.
                                                      Type 'PlotAbandsAccessibilityPointOptions' is not assignable to type 'PlotAbandsAccessibilityPointOptions | PlotAdAccessibilityPointOptions | PlotAoAccessibilityPointOptions | ... 106 more ... | PlotZigzagAccessibilityPointOptions'.
                                                        Type 'PlotAbandsAccessibilityPointOptions' is not assignable to type 'PlotZigzagAccessibilityPointOptions'.
                                                          Types of property 'dateFormatter' are incompatible.
                                                            Type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").ScreenReaderFormatterCallbackFunction<import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Point>' is not assignable to type 'Highcharts.ScreenReaderFormatterCallbackFunction<Highcharts.Point>'.
                                                              Types of parameters 'context' and 'context' are incompatible.
                                                                Property 'setVisible' is missing in type 'Highcharts.Point' but required in type 'import("C:/Users/sitoliquido/Documents/PrismNx.UI/node_modules/highcharts-custom-events/node_modules/highcharts/highcharts").Point'.ts(2345)
Best
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gantt and Custom events in Typescript Angular

Hello supremeauron!
We appreciate you reaching out to us with your inquiry.

This error sounds to me like a bad configuration of the project. Are you using the latest versions of Highcharts and highcharts-custom-events? As you see importing in the online editor is working properly. I can suggest you also reinstall packages in your project.

Let me know if that helps you.
Regards!
Hubert Kozik
Highcharts Developer
supremeauron
Posts: 9
Joined: Mon Oct 25, 2021 2:19 pm

Re: Gantt and Custom events in Typescript Angular

The weird stuff is that in theory I didn't need to do that because the dependency is calling any version >= 5.0.9 and I had the 9...

Btw, by updating the Highcharts library to the version 10, it worked.
Attachments
dip.png
dip.png (33.25 KiB) Viewed 1100 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Gantt and Custom events in Typescript Angular

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”