Skuid v2 - When a chart is being shown/rendered for the first time it causes a flicker

Questions
1

Hello,

It seems like Skuid is trying to draw the chart for a smaller dimension and not in center. Half a second later it then redraws for the expected dimensions and position.

To reproduce: create a bar chart (the only one I tried) that has around 30 or so groupings. The fewer groupings there are the harder it is to see that it draws the chart at smaller dimension, nonetheless you can see a flicker.

Does anyone know a work around with ‘before-render snippets’ or accessing the highcharts object to set some option?

Also, there are no easing animations… any ideas?

Skuid version: 13.0.13

Best,

Lukas

2

Hey @lukaspovilonis and thanks for reporting this!

I will look into this and will try to get back to you ASAP.

3

Hi @Germany1 ,

Thank you very much for taking the time to look at it.

Another issue that might be related: If the graph renders before a model is queried then the graph will not have series (component.getHCConfig().series will return ), hence render-before-snippet will also have no series, so it’s not possible to do much from render-before-snippet. Below is a pastebin with an example.

Current workaround: create two graphs, one which renders when it has data (so show chart which properly rendered) and another one which renders when there is no data (to show no data text). This workaround works so its not a pressing issue, though this extra info might aid with the first problem.

Best regards,

Lukas

https://pastebin.com/3MfGH0rb

4

Hey @lukaspovilonis you can do a few things here:

you can render the chart on pageload

  1. to populate the data before rendering.
  2. hide the chart if it doesn't need to be seen, and when you hit the button, query the model and show the chart after the query.
5

Hi @Germany ,

Thank you for looking into it, I will proceed with the 2nd solution most likely.

Though, I would like to understand what you mean by the first one. Do you mean have an action sequence that is triggered by ‘Skuid Page: Rendered’ event, and one of the actions is ‘Toggle Component’ with behaviour ‘show’?

6

Bump.

The question in above comment.

If it’s not related to the chart being drawn to lower dimensions and then redrawn, is there any possible workaround for that?