How do i access highcharts api after component renders? about highcharts-react

[KacperMadej]

Hi @tsm91

chart instance is a context for chart's events - like load event, so you could use this there to access the chart.

However, it would be nice to have the chart instance accessible easier, so I'm labeling this an enhancement.

[aegyed91]

I would suggest to expose the chart instance via refs as an enhancement point.

+1 for fast reply

[ppotaczek]

Hello,

@niwsa, Thank you for your solution. For the information, currently the chart instance can access by React refs:

componentDidMount(){
  var chart = this.refs.chartRef.chart;
}

Live example: https://codesandbox.io/s/1ol03rwl3

[shiyouping]

The best way to access the underlying chart instance is to use the callback like so:

  afterChartCreated(highcharts) {
    this.internalChart = highcharts;
  }

<HighchartsReact
        options={options}
        highcharts={Highcharts}
        allowChartUpdate={true}
        constructorType={"stockChart"}
        updateArgs={[true, true, true]}
        callback={this.afterChartCreated}
/>

The this.refs way is not recommended by React Official

[niwsa]

Until the enhancement is there a workaround,I am struggling with this for long..:(
For context I am trying to call setSize for the chart to resize inside react-grid-layout.

[niwsa]

I managed to get around by ref forwarding and using the callback attribute on HighchartsReact.

Parent Component with RGL

import React from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import "./Dashboard.css";
import Chart from "./Chart";

const ResponsiveGridLayout = WidthProvider(Responsive);

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    ....
    this.chartRef = React.createRef();
  }
  onLayoutChange(layout, layouts) {
    saveToLS("layouts", layouts);
    this.setState({ layouts });
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.layouts !== this.state.layouts) {
      this.chartRef.current && this.chartRef.current.setSize();
    }
  }
  render() {
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={this.state.layouts}
        // breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 9, sm: 6, xs: 4, xxs: 2 }}
        // width={1200}
        rowHeight={50}
        onLayoutChange={(layout, layouts) => {
          this.onLayoutChange(layout, layouts);
        }}
        autoSize={false}
      >
        <div key="a" data-grid={{ x: 0, y: 0, w: 3, h: 3, minW: 2, minH: 3 }}>
          <Chart ref={this.chartRef} />
        </div>
        <div key="b" data-grid={{ x: 3, y: 0, w: 3, h: 3, minW: 2, minH: 3 }}>
          b
        </div>
        <div key="c" data-grid={{ x: 6, y: 0, w: 3, h: 3, minW: 2, minH: 3 }}>
          c
        </div>
        <div key="d" data-grid={{ x: 0, y: 4, w: 3, h: 3, minW: 2, minH: 3 }}>
          d
        </div>
        <div key="e" data-grid={{ x: 3, y: 4, w: 3, h: 3, minW: 2, minH: 3 }}>
          e
        </div>
        <div key="f" data-grid={{ x: 6, y: 4, w: 3, h: 3, minW: 2, minH: 3 }}>
          f
        </div>
      </ResponsiveGridLayout>
    );
  }
}
export default Dashboard;

Child Chart Component

import React from "react";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

const options = {
  title: {
    text: "My stock chart"
  },
  series: [
    {
      data: [1, 2, 3]
    }
  ]
};

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.setChartInstance = this.setChartInstance.bind(this);
    this.setSize = this.setSize.bind(this);
  }
  setChartInstance(chart) {
    console.log(chart);
    this.chart = chart;
  }
  setSize() {
    this.chart.setSize(null, null);
  }
  render() {
    return (
      <HighchartsReact
        highcharts={Highcharts}
        constructorType={"stockChart"}
        options={options}
        callback={this.setChartInstance}
      />
    );
  }
}
export default React.forwardRef((props, ref) => <Chart ref={ref} {...props} />);

[shiyouping]

Let me share my demo code

import React, { Component } from "react";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import DragPanes from "highcharts/modules/drag-panes";
import Indicators from "highcharts/indicators/indicators";
import Macd from "highcharts/indicators/macd";
import Rsi from "highcharts/indicators/rsi";
import Cci from "highcharts/indicators/cci";
import Atr from "highcharts/indicators/atr";
import Mfi from "highcharts/indicators/mfi";
import Stochastic from "highcharts/indicators/stochastic";

export default class Chart extends Component {
  constructor(props) {
    super(props);
    this.initialize();
    this.afterChartCreated = this.afterChartCreated.bind(this);
  }

  initialize() {
    Indicators(Highcharts);
    Macd(Highcharts);
    Rsi(Highcharts);
    Cci(Highcharts);
    Stochastic(Highcharts); //KDJ
    Atr(Highcharts);
    Mfi(Highcharts);
    DragPanes(Highcharts);
  }

  afterChartCreated(highcharts) {
    this.internalChart = highcharts;
  }

  render() {
    const options = {
      title: {
        text: "My stock chart"
      },
      series: [
        {
          data: [1, 2, 3]
        }
      ]
    };

    return (
      <HighchartsReact
        options={options}
        highcharts={Highcharts}
        allowChartUpdate={true}
        constructorType={"stockChart"}
        updateArgs={[true, true, true]}
        callback={this.afterChartCreated}
      />
    );
  }
}