Using Tooltip formatter function results in the chart not loading

[dangrima90]

According to the Highcharts documentation Tooltips can be formatted using the formatter() function - Here is a simple example of the formatter() function in action.

When I tried using the formatter() function in the chart configuration object, the chart fails to load. Unfortunately I have no errors to share as none are being reported in the console.

Example code:

tooltip: {
  formatter: function() {
    return "Test tooltip";
  }
}

I apologise for the lack of information, but similar to the issue I reported previously https://github.com/NativeScript/nativescript-ui-charts/issues/21 I see no errors in the console. Only thing that happens is that the chart simply does not load.

[shiv19]

I'm currently using the tooltip formatter like this.

can you try passing your function as a one liner string as shown in this image and let me know if that works?

[dangrima90]

@shiv19 thank you for your response - I apologise for the delay! Been a hectic few months.

I've finally found time to test this out. You are right, it does work by providing a JS function as a string to the formatter property.

One question I have is whether shared tooltips work when using custom formatters. As in my example I would like to have shared tooltips, but when enabling the shared property no tooltips are shown. Note that when a custom formatter is not used shared tooltips work as expected.

Example code:

tooltip: {
  shared: true,
  formatter: `function () { return ( '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 'Population: ' + Math.abs(this.point.y) + '%' ); }`,
}

[shiv19]

Hi @dangrima90, According to the typings file, it looks like the shared property is a number on the iOS lib and Boolean on the Android lib.

Can you please try something for me,

If you are using this plugin on android, goto node_modules/@nativescript/ui-charts/options-handler/tooltip/tooltip-handler.js

and change the "shared" property from number to boolean.

And try running your app again.

If that fixes it for you, then I know what to do to resolve this.

[shiv19]

Number on iOS https://github.com/NativeScript/nativescript-ui-charts/blob/1bcd89b84e1a430a91e5c836094194c26e7e3fed/src/typings/objc!Highcharts.d.ts#L6119

Boolean on Android https://github.com/NativeScript/nativescript-ui-charts/blob/1bcd89b84e1a430a91e5c836094194c26e7e3fed/src/typings/android-highcharts.d.ts#L7350

When I wrote the options handler, I primarily referred the iOS typings to create it. That's how it ended up being number only.

[dangrima90]

Hi @shiv19 changing the shared property to boolean did not fix the issue. Note that shared tooltips do work, it's just when setting the formatter function that the tooltips do not show. I will try to investigate a bit more.

[shiv19]

Sure :) I don't have the bandwidth to investigate it this week myself. So any help would be appreciated :)