1

I need to set some conditional properties of a Highcharts object and then render it. This is my trial and error code and results so far.

const Charts = ReactHighcharts.withHighcharts(Highstock);

public render(): React.ReactNode {

        const chart = new Charts();

        // set some passed in options
        const chartOptions: Options | undefined = this.props.opts;

        chart.config = chartOptions;

        if(this.drillable()) {
            chartOptions.chart = {};
            chartOptions.chart.events = {
                drilldown: (event: Highcharts.ChartDrilldownEvent) => {
                    if (!event.seriesOptions) {
                        if(event.point !== undefined) {
                            // @ts-ignore
                            const pathRoot: List<number> = event.point.path;

                            const drilldownSeries = this.getDrillSeries(pathRoot);
                            chart.addSeriesAsDrilldown(event.point, drilldownSeries);      

                        }
                    }
                }
            };
        }

        // maybe add some other conditional configurations

        return (
            <div>
              { chart }
            </div>
        );
}

This results in "Objects are not valid as a React child. If you meant to render a collection of children, use an array instead"

Wrapping it in an array like this and trying to render the 'elements' gives the same error

const elements: any[] = [];
elements.push(chart);

Also tried some variations of creating JSX elements like this

const elements: JSX.Element[] = [];
elements.push(React.createElement(chart));

which results in: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. "

Also tried just rendering just the element, as in 

{ React.createElement(chart) }

which gives the same error again.

Edit:

I think I'm getting there but still missing something. i.e.

<ReactHighcharts
 config={chartOptions}
 callback={this.chartCallback}
/>

I set up my 'chartOptions', and then in chartCallback, I need to mutate those same chartOptions again to add the events(chartOptions.chart.events = {drilldown: etc}).

I tried pulling the chartOptions from the chart object inside the callback but this does not mutate the config. Is there a way to get access to the config inside the callback ? Thanks again.

orion_kid
  • 405
  • 1
  • 7
  • 20
  • If you still need help with using the `highcharts-react` wrapper, please reproduce your code on some online editor which I could work on. Here is a basic template which you can start from: https://codesandbox.io/s/highcharts-react-demo-e1ue3 – Sebastian Wędzel Jun 12 '20 at 13:08
  • Hi Sebastian, I put some pseudo-code in there. Not sure I could really reproduce the exact use case given all the specific dependencies I have but if I could somehow get a reference to the chart on line 69, I think I could get it working. – orion_kid Jun 15 '20 at 16:20
  • I am not sure what is 'on line 69'. Please reproduce your code with sample data in the online editor if you still need help. – Sebastian Wędzel Jun 15 '20 at 22:22

2 Answers2

0

I suggest you use the official wrapper. https://github.com/highcharts/highcharts-react

This has a callback function. The first argument is the chart.

Beside of this you should get the chart config ready before you actually render it.

Christian
  • 6,961
  • 10
  • 54
  • 82
  • 1
    Thanks Christian really appreciate you taking a look. I was up to now using a React wrapper and it was working fine. My problem started when I tried adding the drilldown functionality because now I need to somehow get a reference to the Chart object to invoke .addSeriesAsDrilldown() – orion_kid Jun 12 '20 at 10:06
  • Is the callback function sufficient for you? – Christian Jun 12 '20 at 10:31
0

Finally got somewhere - you do not actually need the callback to access the chart object, nor do you need to 'capture' a reference to it like I had been trying in my original post. It is available in the target property of the event.

e.g.

drilldown: (event: Highcharts.ChartDrilldownEvent) => {
    const highChart = event.target as Highcharts.ChartObject;
    // ...
    highChart.addSeriesAsDrilldown(event.point, someNewSeries);
}
orion_kid
  • 405
  • 1
  • 7
  • 20