React Chart doesn't display for zoom factor 90% in Chrome & Edge

[joecv]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• React Grid
• React Chart
• React Scheduler

Current Behaviour

I have a bar chart (width=400, height=100) in a React function component where in I display dynamic data. The chart gets displayed correctly for the dimension (400*100) for any zoom factor other than 90%. For a zoom factor of 90% the chart does not get displayed in Chrome and Edge. On further debugging I found that chart library has an internal "isReadyToRenderSeries" check which returns false for a Zoom factor of 90% but true for a Zoom factor of 100%. This method in turn uses the getBoundingClientRect method, don't know whether that is causing the difference in behavior based on the change in the view-port in Chrome and Edge. I have read that the behavior of this method differs a bit between Firefox and Chrome.

The solution was to increase the height of the chart to 101 instead of 100 and that solved the issue, but I'm still not sure whether the new height of 101 will cause the same issue with any other zoom factor.

Expected Behaviour

The chart should be displayed correctly irrespective of its dimension, in all zoom factors across all browsers.

Steps to Reproduce

Link to the code sandbox that reproduces the issue can be found here.

• Open the UI in a fresh window (use the 'Open in New Window' button to the right of the address bar)
• Change the zoom factor of the new window to 90%
• Refresh the page.

Screenshots

None

Environment

Windows 10
Visual Studio Code

• dependencies
  • @devexpress/dx-react-chart: 2.7.4
  • @devexpress/dx-react-chart-material-ui: 2.7.4
  • @devexpress/dx-react-core: 2.7.4
  • @material-ui/core: 4.11.0
  • react: 17.0.1
  • react-dom: 17.0.1
  • react-scripts: 4.0.3
  • material-ui: none
• devDependencies
  • @types/react: 17.0.0
  • @types/react-dom: 17.0.0
  • typescript: 4.1.3

[joecv]

@LazyLahtak - Thanks for adding the tag Andrey.

[dccabs]

I'm having the same issue with a line series. depending on the viewing devices, it doesn't show up at various window sizes. Only when resizing does it seem to fix the issue.

[hitesh-s-simform]

Is there any update on this one?

[Krijovnick]

@hitesh-s-simform

We are working on this issue. To fix this, we need to refactor our current implementation. This is a big task and we cannot give any estimates for when this fix will be introduced.