Chart not X-Axis scrolling with >1hz

[msansoni]

When streaming high frequency time series data, the x-axis doesn't update quicker for time intervals <1s, which leads the data not to align to the x-axis.

This CodeSandbox demo shows: https://codesandbox.io/s/my7z73zplx

Is there anyway to force this? In the realtime demo, it is refreshing quicker than 1hz because the timeseries data being pushed in, is faked, so the index is still 1m increments, but forced in at 80ms time periods.

Many thanks!

[EmiPhil]

Any updates on this? I'm experiencing something similar.

I'm looking to have a constantly moving chart so I have the end of the range being updated every 80ms. When you plot data, you can see them moving smoothly backwards in time as expected, but the x-axis only moves once per second instead of every 80ms, so you get this effect where the xaxis is always "catching up" to the data.

See attached gif.

[avenix]

A workaround is to multiply your time values by 1000.

A better solution I found is:

in TimeAxis, componentWillReceiveProps() method, replace the line using the scaleAsString to compare two scales with the method I created: this.didScaleChange(this.props.scale, scale). Find this method below:

areDomainsEqual(domain1, domain2) {
   return (
     domain1[0].getTime() === domain2[0].getTime() && domain1[1].getTime() === domain2[1].getTime()
   );
 }

 areRangesEqual(range1, range2) {
   return range1[0] === range2[0] && range1[1] === range2[1];
 }

 didScaleChange(scale1, scale2) {
   const scale1Domain = scale1.domain();
   const scale2Domain = scale2.domain();
   if (this.areDomainsEqual(scale1Domain, scale2Domain)) {
     const scale1Range = scale1.range();
     const scale2Range = scale2.range();
     if (this.areRangesEqual(scale1Range, scale2Range)) {
       return false;
     }
   }
   return true;
 }