Version 4 feedback and issues

[whawker]

This issue exists to feedback any issues discovered with version 4.

Please note, this rewrite is based on React Hooks, so requires React 16.8.6 and Highcharts 8 as minimum. Please see the release notes for more information on breaking changes.

[filoromz]

Hi great work with the rewrite!

I was wondering with the new version 4 how one would go about having the ability to expose the export chart capabilities?

The way I've previously done it is via declaring the HighchartsChartContext.Consumer and extracting the chart object from there.
Then I can use the export chart function

The reason I'm doing this is I don't want the out of the box export burger button and I want to trigger the export capabilities in my own custom button.

Thanks!

[anajavi]

The way I've previously done it is via declaring the HighchartsChartContext.Consumer and extracting the chart object from there.

You can access the chart object with useChart hook:

const ChartExporter = () => {
  const chart = useChart();
  // do things with chart

  return null;
}

<HighchartsChart>
  <ChartExporter />
</HighchartsChart>

[filoromz]

thanks @anajavi , that worked like a charm!
I was able to call the exportChart function by being able to have reference the chart object

const ChartExporter = (props: any) => {
  const chart = useChart();

  props.chartRef.current = chart.object

  return null;
}

and then whenever i need or want to export the chart I can just do this

chartRef.current.exportChart();

[anajavi]

Might be nice to provide chartRef with ref too, like this (doesn't work currently):

const chartRef = useRef();

<Chart ref={chartRef} />

Shouldn't be too hard to implement. https://reactjs.org/docs/forwarding-refs.html

[Praveen8529]

Hi @filoromz / @anajavi, can we have basic example for custom export for highchart using highstock..?

[anajavi]

Hi @filoromz / @anajavi, can we have basic example for custom export for highchart using highstock..?

@Praveen8529 I have never done any kind of export, so I might be wrong person to make example :)

[filoromz]

hi @Praveen8529 .. im not too familiar with highstock, but i'm sure you can do something similar to the example provided above.
As @anajavi suggested, there's a hook called "useChart()" which gives you access to the underlying chart object.
You can then access all the other functionality like exportChart

[Praveen8529]

hi @Praveen8529 .. im not too familiar with highstock, but i'm sure you can do something similar to the example provided above.
As @anajavi suggested, there's a hook called "useChart()" which gives you access to the underlying chart object.
You can then access all the other functionality like exportChart

Hi @filoromz , Thanks for the info. i had implemented alternative as you suggested :)

[sghosh14]

Hi I am new to this world, and was wondering if this re-write means we dont have access to provideChart provideAxis or provideSeries?

[anajavi]

Hi I am new to this world, and was wondering if this re-write means we dont have access to provideChart provideAxis or provideSeries?

Those can be accessed with the hooks: useChart, useAxis and useSeries. If you still need the HOC's, they can be written with something like this:

function provideChart(Component) {
  const chart = useChart();
  return <Component chart={chart} />
}