react-timeseries-charts icon indicating copy to clipboard operation
react-timeseries-charts copied to clipboard

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

Open joshuaball opened this issue 6 years ago • 0 comments

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 }
];
  1. In the ChartContainer component, set the enablePanZoom property to true and the timeAxisTickCount property to 5.
  2. Add a ChartRow with an AreaChart inside of it that is bound to the sample data.
  3. 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:

  • OS: Windows 10 Pro
  • Browser: Chrome 74, Firefox 68, Opera 62, Edge 42

joshuaball avatar Aug 06 '19 23:08 joshuaball