CODEWITHSUNDEEP
jsonreactjshighchartsreact-highcharts
mtorn
mtorn

Reputation: 159

Highcharts official + React, series population from JSON?

I have some issues with replacing current chart in a project with Highcharts. I'm using highcharts-react-official (and highcharts) NPM packages, and it doesn't render "everything" from the response.

The project is quite large and looking through the old chart implementation it seems to be pretty straight forward with Rechart. The current data fetch from the API response is something like this (in a ComposedChart-wrapper):

data={chartData}

Which then displays all necessary data. I was hoping it would be an easy swap and just populate Highcharts the same way but it wasn't.

In the return method I have this:

<HighchartsReact
 highcharts={Highcharts}
 options={options}
/>

And my options in the render method I have this:

const options = {

  chart: {
    events: {
        load: function () {
          console.log(JSON.stringify(chartData[2].value))
        }
      }
    },
  title: {
    text: ''
  },
  series: {
        name: 'test',
        data: chartData
  }

This sort of works. The console log does print the specific value but if I try it in the series, like data: chartData[2].value it doesn't work. While using data: chartData it DOES display correct amount of entries from the object, as categories (in this case 6 different entries), but nothing more. Is it being parsed wrong or what's the deal?

Thanks!

--

EDIT:

Ok, so this is how it looks now, and it sort of works.

chart: {
    events: {
      load: () => {
        this.state.testChart.map(data =>
        testData.push({
          name: data.time,
          x: data.temp,
          y: data.value
        })
      );
        this.setState({ data: testData });
      }
    }
  },

And in my series:

  series: [{
    type: 'column',
    name: 'Current year',
    data: testData
  },

The visual result is that Highcharts adds all the 6 objects inside the array the response gives me (shows 6 categories). But doesn't display any data from these 6 entries. It looks something like this:

[
 {time: "2018-10-11", temp: "21", value: "10"}, 
 {time: "2018-10-10", temp: "12", value: "31"}
]

At the same time, when change time span (for example clicking a button to show previous week which handles testChart outside HC) these 6 entries (and therefor the categories in HC) change, just as expected. So this looks like the way I need to go but how do I make the data visible? What am I missing?

Upvotes: 0

Views: 1260

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You're probably trying to create a graph when the data has not yet been downloaded. Please take a look at the example below, you can see how you can create a chart with dynamic data:

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/q4us4")
      .then(response => response.json())
      .then(data => {
        options.series[0].data = data;
        this.setState({ data: data });
      });
  }

  render() {
    return (
      <div>
        {this.state &&
          this.state.data && (
            <Chart options={options} highcharts={Highcharts} ref={"chart"} />
          )}
      </div>
    );
  }
}

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

Live demo: https://codesandbox.io/s/mz35zwxjoj

Upvotes: 1

Related Questions