0

I am testing the react-jsx-highcharts possibilities with a polar chart.

Versions:
React: 17.0.1
react-jsx-highcharts: 4.2.0
typescript: 4.0.3

I am using the functional components. So, I don't have any "class" nor "this" in my code.

The chart code is :

<HighchartsProvider Highcharts={Highcharts}>
        <HighchartsChart polar plotOptions={plotOptions}>

          <Tooltip shared
            formatter={tooltipFormatter}
          />

          ...


        </HighchartsChart>
      </HighchartsProvider>

All the examples that I have found use this.x, this.value to generate a rich formatter. For example here or here

I have tried to use the explicit type as:

const tooltipFormatter:TooltipFormatterCallbackFunction = (mycontext: TooltipFormatterContextObject, mytooltip: Tooltip) => {
    return "...";
  }

but typescript does not accept it, and I cannot find a way to build a clear rich formatter.

Thank you!

SmeagolGollum
  • 107
  • 1
  • 14
  • Hi @SmeagolGollum, did you find the solution for this? I run into a similar problem that i need to call the Chart.reflow() method, but the example just showing react component with javascript class. – kelvin Jul 15 '21 at 07:18
  • Hi @kelvin, another team took this subject and I admit I focused on other issues since... :-) – SmeagolGollum Jul 16 '21 at 13:12

1 Answers1

0

I found the solution in their documentation: https://www.npmjs.com/package/react-jsx-highcharts , where it mentioned, in "Exception 1":

Where Highcharts events are concerned - instead of passing events as an object, we use the React convention onEventName.

So we can use the callback props in <HighchartsChart> element to get the chart object, like so:

const [chart, setChart] = useState({});

const setChart = cha => {
    setChart(cha);
}

...
<HighchartsProvider Highcharts={ Highcharts }>
  <HighchartsChart plotOptions={ plotOptions } chart={ chartOptions } callback={ setChart }>
...

And we can access the chart object with the chart state.

kelvin
  • 436
  • 5
  • 3