Cannot make use of Highcharts events

[dangrima90]

In the Highcharts configuration there are objects that accept an events property. Example running some callback after the chart is loaded (https://api.highcharts.com/highcharts/chart.events.load).

chart: {
  margin: [0,0,0,0],
  events: {
    load: function() {
      console.log("chart loaded!");
    }
  }
},

When I tried this out I got a console log with the following message:

Handler for events HIEvents not implemented

After digging into the code I found out that the warning is coming from here:

https://github.com/NativeScript/nativescript-ui-charts/blob/bab23680f98a9000cf2c8cfeac5aae230a2faf3b/src/options-handlers/helpers/helpers.android.ts#L134

I am right in assuming that this functionality is not yet available, or should I be setting this up differently?

I am working with NativeScript Vue - NS 7; Package version 0.1.0.

[shiv19]

Hi @dangrima90, Yes the handler for HiEvents is not implemented, but it is easy to add support for it.. let me see if I can add that in for you quickly

[shiv19]

@dangrima90 Added support for HiEvents in version 0.1.1 published just now

Please update to @nativescript/ui-charts@0.1.1

and let me know if it works well for you :)

The reason why I didn't add it originally was because I didn't write support for HiFunctions in the first release. After I implemented HiFunctions, HiEvents some how got missed out from my radar.

Thanks for bringing this to my attention.

If you look at the last commit, you'll see how easy it is to add support for it yourself.

You just have to look at src/typings/objc!Highcharts.d.ts, find the class you want to add support for,

then goto src/options-handlers folder and implement the class there, then add reference to it inside src/options-handlers/helpers/_helpers.common.ts :)

[dangrima90]

Thanks a lot for the quick response @shiv19. Will test it out soon and let you know how it goes.

[shiv19]

Thanks! I don't have time to test it myself right now. Sorry about that

[dangrima90]

Just a quick test resulted in the chart not being displayed when adding an event. Example:

chart: {
  events: {
    load: function() {
       console.log("chart has loaded!");
    }
  }
}

Not errors so far, will try to dig in a bit to find the issue.

[shiv19]

Any errors in the console? or in the ADB logcat, if you're on android

[dangrima90]

So with regards to errors none in the console. Using Android logcat I saw the following errors - not too sure if they are related to the chart not being shown:

2021-05-17 15:59:29.780 15829-15829/org.nativescript.application E/Highcharts: Uncaught SyntaxError: Invalid or unexpected token
2021-05-17 15:59:29.781 15829-15829/org.nativescript.application E/Highcharts: Uncaught SyntaxError: Invalid or unexpected token
2021-05-17 15:59:30.131 15829-15829/org.nativescript.application E/Highcharts: Uncaught SyntaxError: Invalid or unexpected token

Chart being loaded is using the following configuration:

{
  chart: {
    events: {
      load: function() {
        console.log("LINE CHART HAS LOADED!!");
      }
    }
  },
  title: null,
  series: [
    {
      name: "Test",
      data: [1, 12, 3, 15],
    },
  ],
}

[cjohn001]

@dangrima90 : I assume same issue applies for load like for formatter. Try to provide the function as a string like shiv19 has shown for the tooltip formatter