esnet / esnet/react-timeseries-charts

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

Open
#412 0 comments 0 reactions 0 assignees View on GitHub
:spider: bug
Dominant language
JavaScript
Stars
876
Forks
279
PR merge metrics
No merged PRs in 30d

Description

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](https://user-images.githubusercontent.com/50068/62582578-d405d000-b861-11e9-8ca4-e456564869b0.png)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.