Highcharts-react not rendering on initial page load

Question

I have a simple React component which is supposed to render two Highcharts using the highcharts-react library. The data for the charts comes from a parent component's state and is passed to this component as a prop. When the page loads, the pie chart is empty (eg there's just an empty circle with no series). If I inspect the HighchartsReact element using the React element inspector, I can see that the correct data is in the options prop. Also, if I manually alter any of the data in the inspector, the chart suddenly shows up. My guess is that it has something to do with the chart not updating properly but I can't exactly pin down what I am doing wrong.

const sharedPlotOptions = {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: null,
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Countries',
        colorByPoint: true,
        data: []
    }]
}

export function CountryPopulationPlot(props) {
  let adultData = props.countries.map(country => ({
    name: country.name,
    y: country.population //TODO: use adult only data
  }))

  let allData = props.countries.map(country => ({
    name: country.name,
    y: country.population
  }))

  let adultPlotOptions = sharedPlotOptions
  adultPlotOptions.series[0].data = adultData

  let allPlotOptions = sharedPlotOptions
  allPlotOptions.series[0].data = allData

  return(
    <div>
      <HighchartsReact
        highcharts={Highcharts}
        options={adultPlotOptions}
        oneToOne={true}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={allPlotOptions}
      />
    </div>
  );
}

EDIT: oneToOne prop was an attempt at fixing the bug, it doesn't seem to have any effect.

Are you able to reproduce your case on the online editor which I could work on? You can use this template: https://codesandbox.io/s/highcharts-react-demo-7d1nd — Sebastian Wędzel, Nov 28 '19 at 10:06

score 0 · Answer 1 · answered Mar 29 '20 at 16:42

In Highcharts for Pie charts to render, the adultData and allData should be in the format as below:

[
  {
    name: "USA",
    y: 1000
  },
  {
    name: "Italy",
    y: 500
  }
]

(or)

 [
  {
    "name": "USA",
    "y": 1000
  },
  {
    "name": "Italy",
    "y": 500
  }
]

Please double check this in your input data. I have written a blog post and a working application on GitHub with a simple Highcharts Pie chart example. Please check: http://softwaredevelopercentral.blogspot.com/2020/03/react-highcharts-and-spring-boot.html

ronbon · Answer 2 · 2021-10-01T00:23:49.640

I'm having the same issue and found a rough workaround. Like you said this happens on the initial component render. Therefore triggering a re-render by updating a state solves the problem.

const [shouldRender, doRender] = useState(true)
useEffect(() => {
   if (shouldRender) {  // this stops the cycle after the first re-render
      doRender(!shouldRender)
}

Would like to add in case someone has a better solution, I'm rendering multiple graphs with the same props and only pie charts are an issue.

Highcharts-react not rendering on initial page load

2 Answers2