belomor123
Posts: 11
Joined: Fri Jul 03, 2020 12:11 am

Highcharts gives blank data

Hi there,

I am using HighCharts 9.2.2 and Highcharts-react-official 3.0.0
I am trying to render multiple Highstock charts on the same page. For that I created a component that uses Highcharts. Code for that component looks like below:

Code: Select all

import React from 'react'
import HighchartsReact from 'highcharts-react-official'
import Highcharts from 'highcharts/highstock'

export default function CompareCardChart({data}) {
    console.log(data.length)
    const chartOptions = {
        xAxis: {
        },
        yAxis: {},
        series: {data: data}
    }
    return (
        <React.Fragment>
            <HighchartsReact options={chartOptions} highcharts={Highcharts} constructorType={'stockChart'} oneToOne={true} />
        </React.Fragment>
    )
}
I call for this component from parent as shown below:

Code: Select all

let resultCards

    if (resultsData.length) {
        resultCards = resultsData.map(el => {
            return (
                <div className="compare__card" key={el.key}>
                    <h5>{el.instrument}</h5>
                    <div className="compare__chart">
                        <CompareCardChart data={el.chartData} />
                    </div>
                    <p>{defaultType}</p>
                </div>
            )
        })
    } else {
        resultCards = (<p>Nothing here</p>)
    }
    
When this runs, Highcharts component renders but does not display the chart data. If i make a change within the code (e.g. add a console log or anything else unrelated) and save code, React automatically updates the page and I can see the chart displayed properly. But if I navigate away from the page and navigate back to it, then again, Highcharts is rendered but no chart data is visible.

I am not sure what is causing this problem. I have even tried setting static data set in chartOptions but the problem persists.

Thank you very much for your help!

Best regards,

Mikhail
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts gives blank data

Hi,

I'm sorry to have waited a while for a reply.

The problem is that you are incorrectly assigning data to the series. This should be an array of objects instead of a single object.

Just change:

Code: Select all

series: {
  data: data
}
on this:

Code: Select all

series: [{
  data: data
}]

Demo: https://codesandbox.io/s/highcharts-rea ... rdChart.js

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
belomor123
Posts: 11
Joined: Fri Jul 03, 2020 12:11 am

Re: Highcharts gives blank data

This has helped!
Thanks a lot!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts gives blank data

You're welcome!

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”