Ngx-charts: Chart Width Calculation Adjustment - Chrome

Created on 11 Sep 2018  路  2Comments  路  Source: swimlane/ngx-charts

**I'm submitting a ...

  • [ x ] bug report
  • [ ] feature request
  • [ ] support request

Current behavior

We've encountered a bug that manifests itself in chrome when the browser zoom is adjusted. The bug appears to be in the chart width calculation. At certain chart and y-axis widths, the tag will loop on a "1px" width adjustment. This will create a flickering in the chart. A similar bug report (#349) is open for charts with y-axis labels and/or custom axis ticks marks but we are experiencing the behavior in the absence of those attributes.

We're seeing a CPU usage spike of ~10 -15% when the browser encounters the bug.

First time posting, appreciate the patience.

Expected behavior

Chart scales with zoom / width.

Reproduction of the problem

https://user-images.githubusercontent.com/33229654/45365530-af9a6880-b5aa-11e8-9c56-c28f7b63f76c.gif

What is the motivation / use case for changing the behavior?

We hope to use ngx-charts in our production app!

Could we explore increasing the unit of adjustment to an integer greater than 1px?

Please tell us about your environment:

  • ngx-charts version: 9.0.0
  • Angular version: 6.1.7

  • Browser: Chrome Version 68.0.3440.106

  • Language: TypeScript 2.9.2

Most helpful comment

+1. We are seeing the same problem on different charts types in dynamically rendered parent containers (flexbox and grid).

All 2 comments

+1. We are seeing the same problem on different charts types in dynamically rendered parent containers (flexbox and grid).

It also happens on the Kubernetes Dashboard.
https://www.youtube.com/watch?v=7OhzK_w4u4Q
https://i.imgur.com/542tkIa.mp4

Ref:
kubernetes/dashboard#5050
kubernetes/dashboard#5101
kubernetes/dashboard#5102
kubernetes/dashboard#5106
kubernetes/dashboard#5118
kubernetes/dashboard#5236

In all this issue you can find an infinite way to reproduce the problem.

The Kubernetes dashboard is a fairly visible project.
Is there room for someone to solve this problem shortly?

There is another issue for the same problem open since spring 2017. 馃槥
https://github.com/swimlane/ngx-charts/issues/349

Was this page helpful?
0 / 5 - 0 ratings