esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
859 stars 283 forks source link

The timeAxisTickCount property of the ChartContainer gives inaccurate results on initial render and based on zoom level #412

Open joshuaball opened 4 years ago

joshuaball commented 4 years ago

Hello All, When using the timeAxisTickCount property of the ChartContainer component to set ticks on the time axis, I'm seeing a decent discrepancy between the number of ticks being shown and the value of the property. This can be more pronounced as the chart is zoomed in and out with the scroll wheel. With a setting of 5, I'm seeing 10 ticks displaying once the chart is rendered. As I zoom in and out, this displaying ticks can be as few as 2 or as many as 12.

Steps to reproduce the behavior:

  1. Here is a copy of the example data I was using to cause the issue:
    var data = [
    { "time": 1560469431423, "Temperature": 52, "Pressure": 12 },
    { "time": 1560469432423, "Temperature": 18, "Pressure": 42 },
    { "time": 1560469433423, "Temperature": 26, "Pressure": 81 },
    { "time": 1560469434423, "Temperature": 63, "Pressure": 11 },
    { "time": 1560469435423, "Temperature": 65, "Pressure": 23 },
    { "time": 1560469436423, "Temperature": 12, "Pressure": 43 },
    { "time": 1560469437423, "Temperature": 61, "Pressure": 71 },
    { "time": 1560469438423, "Temperature": 60, "Pressure": 89 },
    { "time": 1560469439423, "Temperature": 58, "Pressure": 66 },
    { "time": 1560469440423, "Temperature": 1, "Pressure": 33 }
    ];
  2. In the ChartContainer component, set the enablePanZoom property to true and the timeAxisTickCount property to 5.
  3. Add a ChartRow with an AreaChart inside of it that is bound to the sample data.
  4. If the ticks are not inaccurate immediately, zoom in/out a bit to see the behavior. Chart width or height does not matter.

Expected behavior: I'd think that it could remain accurate to the tick count on initial render and while zooming.

Screenshots: image

Desktop: