search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

Chart Flickering #349

Open jtushar53 opened 7 years ago

jtushar53 commented 7 years ago

I'm submitting a ... (check one with "x")

[*] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

chart flickers as per the attachment. currently tested on vertical bar chart. Also on other machines not able to reproduce.

Expected behavior

it should resize as as per container Reproduction of the problem

  1. go to https://swimlane.github.io/ngx-charts/
  2. open developer console as per attachment so that view height will be around 300 px
  3. toggle fit container or Show X axis or Show Y axis What is the motivation / use case for changing the behavior?

    we've been trying to implement it in angular-gridster2 widgets. we have removed view attribute and it fits to container. When we make the widget big chart renders as expected and fit to widget but when we make the widget small it start flickering.

note: When widget resize chart doesn't fit to container, we had to add window.dispatchEvent(new Event('resize')); to the widget's resize callback. Please tell us about your environment:**

Windows 7 Display - 1366 x 768

ngxchartissue

StanFisher commented 6 years ago

@marjan-georgiev We are also seeing this at times in our production app. Is there a workaround for this? Is there anything new that has been learned since the posting of this issue in April?

StanFisher commented 6 years ago

I was able to get it to be consistent at 1200x328 and selecting "Fit Container".

flickering

Chrome dev tools is showing that the ngx-charts SVG element is 666x228.

sandangel commented 6 years ago

I have faced the same issue, it seem like it's a bug with responsive break point. I guess we can find out something in calculate functions for chart size in the src/utils folder.

marjan-georgiev commented 6 years ago

Thanks for helping to reproduce this, @StanFisher

This seems to be happening because of this: https://github.com/swimlane/ngx-charts/blob/master/src/bar-chart/bar-vertical.component.ts#L37

The charts needs to measure the axes width and heights after they have been rendered, and update its dimensions to make room for them, after which it updates. There is something about these particular dimensions that causes this feedback loop to never end, resulting in the flicker we are seeing.

sjdemoor commented 6 years ago

Also seeing this problem -- on production app. Any plans to continue the investigation/fix? Thanks

jkrieg commented 6 years ago

First time posting, forgive the lack of introduction: I have encountered this issue as well. I understand that it is quite a challenge to solve for all cases, but I have a thought on this matter: If the calculation for tilting the text in either direction yields no positive result, could you shrink the font, further reduce the number of characters allowed, or place the text within the bar itself?

jchamma commented 5 years ago

@marjan-georgiev @jtushar53 is there any update on regards to the resolution of this issue? the character solution limitation suggested above could be a simple and good way to resolve it. Any other solution in mind? are you planning to resolve this issue? thank you very much!

jtushar53 commented 5 years ago

@jchamma i am as of now living with it.

Vikki123 commented 5 years ago

Is there any update on this issue? At least is there any workaround for this ?Seeing the same issue on grouped bar charts as well.

heshiming commented 5 years ago

It looks like this bug only occurs when the chart doesn't have enough height. Make it taller to a point, and the problem goes away.

yairu commented 5 years ago

@heshiming i don't sure that the height is the problem, in some situations the chart flickering when the height is tall enough but the width is thin, my guess is the flickering happens when the xAxisTicks need to rotate for fits themselves to the chart size, but there isn't enough space.

AlluNandaKishore commented 5 years ago

I too have the same issue,in which i have some negative values in data. translate(height,width) function on svg element is changing continuously.

Please update the issue ASAP.

jamiemac87 commented 4 years ago

Any updates on this issue?

pierluigilenoci commented 4 years ago

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

Ref: https://github.com/kubernetes/dashboard/issues/5050 https://github.com/kubernetes/dashboard/issues/5101 https://github.com/kubernetes/dashboard/issues/5102 https://github.com/kubernetes/dashboard/issues/5106 https://github.com/kubernetes/dashboard/issues/5118 https://github.com/kubernetes/dashboard/issues/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?

pierluigilenoci commented 4 years ago

@marjan-georgiev @Hypercubed Can you please plan somehow to solve this problem? Thank you.

JLWeich commented 3 years ago

Has anyone found a solution for this problem? I am having this in Production and I am not able to change the size of the chart to prevent it. PLEASE HELP!

Zanhix commented 3 years ago

The only way we found was to remove x axis labels when the chart had a problematic size.

JLWeich commented 3 years ago

@Zanhix Thanks for the reply, but unfortunately I can't do that. The customer is expecting some labels.

ddzingielewski commented 2 years ago

Hi, my workaround: 1) inside Your project make local copy of chart component (for example: https://github.com/swimlane/ngx-charts/blob/master/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts (remember to change component name and selector, for example: 'MyBarChartComponent' and 'my-bar-chart' respectively) 2) in your current template, change from <ngx-charts-bar-vertical/> to <my-bar-chart/> 3) on Your local copy (MyBarChartComponent) comment this.update() in updateXAxisHeight method

It serves my need, i mean i did not spot any lack of functionality or any visual side effect of removing this "update" operation. Updates are triggered by many other sources, so chart still scales smoothly despite lack of "update" operation in some circumstances.

Nonetheless its ugly workaround:

  1. First of all it incorporates part of library into Your code, which makes it harder to maintain
  2. Secondly, its does not invokes update() as authors planned, so it may leads to some side effect

But at least flickering has gone.

pierluigilenoci commented 2 years ago

@marjan-georgiev @Hypercubed @nelsonGuti any update on this?

pierluigilenoci commented 1 year ago

@surya-pabbineedi @jogaj @mgilroy, any update on this?

pierluigilenoci commented 1 year ago

@ddzingielewski, couldn't create a PR with your workaround make sense?