Vega-lite_Hovering "Jumping" Issue

Community Help
1

I was following this article, thx, @john-guerra, but this example has very weird effect while you’re hovering over latest price labels at the edge of graph it starts to jump.
How to solve this issue?

2

It is “jumping” because when the label gets to the right border the sizes of the inner charts grow, making everything to readjust. I spent some time on it playing with the different sizing options, but couldn’t find a solution. Try asking the vega-lite communities

2 Likes
3

Adding the .bounds('flush') fixed the jumping.
Also made the width look nicer by defining it as a just under a 1/3 of the width.
.width(width*0.3)

      // add white stroked text to provide a legible background for labels
      base.markText(label, white).encode(vl.text().fieldN('aspect_desc')),
      base.markText(label).encode(vl.text().fieldN('aspect_desc'))
    )
    .width(width*0.3)
    .height(120)
    .facet(vl.facet()
           .sort('ascending')
           .fieldN('performance_id').title(null)
          )
    .columns(3)
    .bounds('flush')
    .data(bv2)
    .render();
}
2 Likes
4

For posterity, the docs on .bounds() can be found here. To quote:

If set to flush, only the specified width and height values for the sub-view will be used. The flush setting can be useful when attempting to place sub-plots without axes or legends into a uniform grid structure.

2 Likes
5

@mootari , thank you for additional information. I’ve applied .bounds() to my code, but now there is another issue - headers for the graphs are too close for the upper graphs, do you have an idea how to move headers down or to add space between headers and upper graph’s row?
I’ve add you as an editor of this notebook

6

I’m only vaguely familiar with Vega / Vega Lite, so unfortunately no.

I suggest that you publish your notebook as unlisted and share the link here, so that others (e.g. @hellonearthis) can take a look as well. If that’s not possible, try to recreate a simplified example in another notebook to demonstrate the problem.

1 Like