0

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?

mtorn
  • 159
  • 3
  • 16
  • Hi mtorn, As to your edit, the values in data must be numbers not a strings. – ppotaczek Oct 10 '18 at 13:13
  • I tested to quickly convert them in the response, in the testData.push method, for example x: Number(data.temp) which didn't help. – mtorn Oct 11 '18 at 07:56
  • Hi mtorn, Could you prepare some minimal live example? – ppotaczek Oct 11 '18 at 08:39
  • I did a quick example but it's not fully working but maybe you get the picture of it. https://codesandbox.io/s/5m99q7nkp – mtorn Oct 11 '18 at 08:50
  • Hi mtorn, Thank you for the example, now it is much easier to look at the problem. You can not convert data in `load` event, because it is before it is downloaded. Live demo: https://codesandbox.io/s/q3z4k1k9yw – ppotaczek Oct 11 '18 at 09:42
  • Oooooh I see! Yeah, that's more like it! Do you know how I could update the call when clicking on a button? For example, testChart is already fetching data from another method in the script, and upon click it updates testChart with new values. But as of now Highcharts doesn't seem to respond to the update. Is it because it's set inside the event load function and fires only once? – mtorn Oct 11 '18 at 10:39
  • Yes, `load` event fires only once, you can read about chart events in API: https://api.highcharts.com/highcharts/chart.events Here is an example how you can get data and update the chart after click in the button: https://codesandbox.io/s/q3z4k1k9yw https://codesandbox.io/s/q3z4k1k9yw – ppotaczek Oct 11 '18 at 11:49

1 Answers1

1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Yeah I thought of something like that, but it doesn't seem to help. If I use another dummy JSON it won't populate the chart. See demo: https://codesandbox.io/s/n77117y1k0 – mtorn Sep 25 '18 at 09:39
  • Hi mtorn, thank you for the example, but it does not work anymore. I could see that you have wrong data format, please take a look at examples in API: https://api.highcharts.com/highcharts/series.column.data – ppotaczek Sep 25 '18 at 13:17
  • Oh, I see. Well, the same principle is in this link, just switch between the two. https://codesandbox.io/s/6xm89n36m3 I get that it wouldn't work out of the box but do I need to heavily manipulate the response to fit the data format HC wants or what do I need to do? – mtorn Sep 25 '18 at 13:23
  • Yes, you need to convert your response to the format required by Highcharts, for example in this way: https://codesandbox.io/s/wwym42z1q7 – ppotaczek Sep 25 '18 at 13:40
  • 1
    Great, that works! Thank you. But I realized that it doesn't work with current setup of the application. It doesn't re-render when fetching new data, example for switching timespan. I'll create a new post in this thread with more info. – mtorn Oct 10 '18 at 08:24
  • I've updated the first post if you don't mind having a look. – mtorn Oct 10 '18 at 12:28