How to use highcharts in reactjs with fetched data from API

Question

I want to display data from API with highcharts but still get an error because highchart config declared outside the class app and data fetched inside class app.

It works if use static data, here is the example from static data link.

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';

const data = [
    [1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 
    21.66], [1221091200000, 21.81], [1221177600000, 21.28], 
    [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 
    18.26], [1221696000000, 19.16], [1221782400000, 20.13], 
    [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 
    18.39], [1222300800000, 18.85], [1222387200000, 18.32], 
    [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 
    15.59], [1222905600000, 14.3], [1222992000000, 13.87], 
    [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 
    12.83], [1223510400000, 12.68], [1223596800000, 13.8], 
    [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 
    13.99], [1224115200000, 14.56], [1224201600000, 13.91], 
    [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 
    13.84], [1224720000000, 14.03], [1224806400000, 13.77], 
    [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 
    14.94], [1225324800000, 15.86], [1225411200000, 15.37], 
    [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 
    14.76], [1225929600000, 14.16], [1226016000000, 14.03], 
    [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 
    12.87], [1226534400000, 13.78], [1226620800000, 12.89], 
    [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 
    12.33], [1227139200000, 11.5], [1227225600000, 11.8], 
    [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 
    13.57], [1227830400000, 13.24], [1228089600000, 12.7], 
    [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 
    13.06], [1228435200000, 13.43], [1228694400000, 14.25], 
    [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 
    13.57], [1229040000000, 14.04], [1229299200000, 13.54]
];

const config = {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
};

class App extends Component {
  render() {
    return (
      <div className="App" />
    );
  }
}

render(<ReactHighstock config={config}/>, 
document.getElementById('root'));

With example above, two variable data and config placed outside the class app, so i think it's not problem.

But if i want to fetch data from API, the data placed inside the class app and config still outside class app. So i get an error 'data is not defined' here is the link

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';

const config = {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      dataResults: [],
    }
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    fetch('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          dataResults: data
        });
      });
  }

  render() {
    return (
      <div className="App" />
    );
  }
}

render(<ReactHighstock config={config}/>, 
document.getElementById('root'));

How to use highcharts with fetched data from API?

Answer 1

Your App component is currently not part of your DOM as you're rendering ReactHighstock as a root component. One solution would be to render the chart inside the App component and pass the data dynamically:

const getConfig = data => ({
  rangeSelector: {
    selected: 1
  },
  title: {
  text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
  tooltip: {
    valueDecimals: 2
    }
  }]
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      dataResults: [],
    }
  }

  componentDidMount() {
    this.getData();
  }  

  getData = () => {
    fetch('your_endpoint_url')
      .then(res => res.json())
      .then(data => {
        this.setState({
          dataResults: data
        });
      });
    }

  render() {
    const { dataResults } = this.state;
    const chartConfig = getConfig(dataResults);
    return (
      <ReactHighstock config={chartConfig}/>
    );
  }
}

render(<App/>, 
document.getElementById('root'));

You should of course handle a use case where the data has not been fetched yet and display a placeholder.