highcharts re-render every time when another component state change

[xang555]

thanks! for you create this library.

i have some problem when i use highcharts for adapter of react-chartkick. Issues occur when i changed state of another component for example: state of dropdown component. chart is redraw data (data for chart is not change)

how to avoid it ?

thanks!

[xang555]

close this issue! i can fix it

create wraper component for Chart using shouldComponentUpdate() method for update this component when data change

import React from "react";
import PropTypes from 'prop-types'
import ReactChartkick, { LineChart, ColumnChart } from "react-chartkick";
import highcharts from "highcharts";

class ChartWraper extends React.Component {

constructor(props){
  super(props);
  ReactChartkick.addAdapter(highcharts);
}

  shouldComponentUpdate(nextProps, nextState) {
      return !Object.is(nextProps.data, this.props.data)
  }

  render() {

    const { chart_type } = this.props

    return (
      <React.Fragment>
        {
          chart_type === "LineChart" ? (
            <LineChart
            legend="bottom"
            thousands=","
            {...this.props}
          />
          ): chart_type === "ColumnChart" ? (
            <ColumnChart
            legend="bottom"
            thousands=","
            {...this.props}
          />
          ): null
        }
      </React.Fragment>
    );
  }
}

ChartWraper.propTypes = {
  chart_type: PropTypes.string.isRequired,
  data: PropTypes.any.isRequired
}

export default ChartWraper;