CODEWITHSUNDEEP
javascriptreactjshighcharts
julianaschneider
julianaschneider

Reputation: 46

Update series using Highcharts React wrapper

I am implementing an application using the Highcharts React wrapper.

What I am trying now is to add a button group that filters the data according to the button clicked and passes the series data back to the charts. The problem is: I don't know and can't seem to find how to pass this new data set to the chart anywhere. All I found were results for JS Vanilla, using jQuery. Does anyone know a solution using the React wrapper?

Here is a working demo. In the demo, I couldn't find out why, when you choose and option on the select and than choose back it does nothing, but it works in my project, so no worries about it.

EDIT: in the demo I have a select. The select is not the issue. The problem is I don't know how to pass the filteredData to the chart as a new series.

Upvotes: 1

Views: 2290

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You need to store your data in a state and update it on filtering:

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredData: this.props.data
    };
  }

  render() {
    const { data } = this.props;
    const { seriesOptions } = this.props;
    const handlePeriodClick = periodType => {
      const filteredData = data.map(option => ({
        ...option,
        data: option.data.filter(
          item =>
            moment(item[0]).diff(moment(item[0]).endOf(periodType), "days") ===
            0
        )
      }));

      this.setState({ filteredData });
    };

    ...

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          ...
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ style: { height: "500px", minWidth: "400px" } }}
            options={{
              series: this.state.filteredData.map((set, index) => ({
                ...set,
                type:
                  seriesOptions && seriesOptions[index].curveType
                    ? seriesOptions[index].curveType
                    : "line",
                cursor: "pointer"
              }))
            }}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

Live demo: https://codesandbox.io/s/update-data-source-r3lm9

Upvotes: 1

Related Questions