0

Using highcharts-react-official and plotting two area chart series. The seriesA is on the left and consists of lower numbers than everything in seriesB which is on the right. The problem I'm having is that while these are being initially loaded, the x-axis seems to have a maximum value set to the max value in seriesA and then after a split second it starts adding more values to the x-axis so the effect is that the x-axis appears to be animated. The axis starts as seriesA.min through seriesA.max and then animates to become seriesA.min thorugh seriesB.max. The main problem with this is that I don't want it animated at all, and second, the seriesB is already on the chart before the x-axis is fully done "animating" and adjusting its size so the two series overlap each other while animating.

I've tried setting the min/max of the chart using the initial data and this actually solves the problem, but only temporary since eventually those values need to be adjusted based on new dynamic data coming in to update the series but since I hard coded the min and max, they don't get adjusted with the data. Does anyone know how I can work around this problem?

See attachment for an example of what graph normally looks like after it has finished animating.

Here is a reproduction of the problem: https://codesandbox.io/s/highcharts-react-demo-kxejt

SeriesA on the left, SeriesB on the right

Joe Phillips
  • 49,743
  • 32
  • 103
  • 159
  • Hi @Joe Phillips, Could you reproduce that problem in some online code editor? The issue is probably related with Highcharts, so you should be able to use only pure JS. – ppotaczek Feb 07 '20 at 17:05
  • I have not been able to reproduce or narrow down the cause yet. Here's an example where the problem does NOT occur though: https://jsfiddle.net/4o93cbwg/1/ – Joe Phillips Feb 07 '20 at 19:25
  • I have narrowed it down to it happening when call `chart.series[0].update(seriesA)` in `componentDidMount()` – Joe Phillips Feb 07 '20 at 21:36
  • Hi @Joe Phillips, I recommend you to use the offcially supported wrapper for Highcharts: https://www.npmjs.com/package/highcharts-react-official – ppotaczek Feb 10 '20 at 10:58
  • @ppotaczek I mentioned in the first sentence that I am using that already. I plan to keep narrowing down the problem today. I think it has to do with calling update before I initialize the options – Joe Phillips Feb 10 '20 at 11:01
  • 1
    Yes - sorry I have missed that. When you will be able to reproduce the problem, please provide me with an example. You can start from: https://codesandbox.io/s/highcharts-react-demo-r977k – ppotaczek Feb 10 '20 at 11:14
  • @ppotaczek I was able to reproduce it! https://codesandbox.io/s/highcharts-react-demo-kxejt ...when you reload the page you will see that the x-axis goes from 1-2 and then slides in from 1-3 – Joe Phillips Feb 10 '20 at 14:10
  • I think the solution is to use setData() instead of update() within the componentDidMount – Joe Phillips Feb 10 '20 at 14:15
  • The problem is related with unnecessarily repeated `redraw`, you can set the parameter to false: https://codesandbox.io/s/highcharts-react-demo-hhwje or do the update in a reactive way: https://codesandbox.io/s/highcharts-react-demo-nbjdm – ppotaczek Feb 10 '20 at 15:20

0 Answers0