Why do widths change when hiding a value?

[kmartastic]

Why do widths change when hiding a value?
It makes keeping a visual reference difficult.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

@markov00 It seems like this is unconfigurable elastic-charts behavior (or I missed it) - do you think it makes sense to reserve the space for hidden series?

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[markov00]

Hi @kmartastic what would be from your point of view the preferred behavior? when hiding series these are the involved properties that can change/be changed from a visualization point of view:

1. the width of the bars: if previously it accommodates space for 4 bars on the same tick, hiding a series can provide more space for the others
2. the position of the bars: hiding a series can realign all the bars side by side into the center of the tick
3. the Y domain can change, hiding a series with the higher value or hiding a series on a stacked bar chart can lead to a change in the y domain
4. if the x domain is not specified and we compute it based on a, potentially partial, dataset, hiding an x series can lead to a reduced x domain.

This is what happens in elastic-charts by default when hiding a series, and it was a replica of the current preexisting behavior of TSVB. We can for sure add a way to configure this behavior that, from IMHO, can be different depending on the use case:

1. too many series to visualize -> better to hide and grow bar size to increase readability
2. you want to compare just a few series -> keep the same domain, width, and positions independently from the hidden ones or keep domain and width but recenter the bars to the center of the tick
3. visualize the domain changes when subtracting a bar from a stacked chart -> keep or replace width and position and update the domain with the changes

All seems valid options to me, so probably @elastic/chats should provide options for all these cases.

On your gif is also difficult to understand exactly what is going on without a proper x-axis as a baseline, the data is also incomplete (or at least is incomplete in this screenshot) so I don't have a good perception of what is going on there, could you please post a gif that covers the whole chart?

[kmartastic]

Thanks for the thoughtful responses. I'll get back with my thoughts and the full chart gif. @markov00

[kmartastic]

Hey @markov00 -- just getting back to this. I've been playing with Lens. I.e, exploring data, looking for something interesting, but without a specific question in mind.

With only a few values (bars). I don't get why bars are not centered on their ticks. The misalignment with the axis labels feels off. There is already so much spacing between bars, that the relatively small increase in width feels more disruptive than it improves readability. I say this as I am interacting with the data; if I immediately brought this chart on to a dashboard, I might want readability maximized. With a large number of values. The resizing, positioning changes are barely noticeable going from 30 to 10 values.

What I think would be helpful is an animated transition when removing/adding elements of the chart. Right now, clicking on a value to hide it from the chart, does several things at once -- removes bars, resizes widths of remaining bars, and potentially repositions bars (if the value removed was in the middle of other values). An animated transition would help maintain reference with the data; would feel less jarring, and in my opinion might be a better experience than adding more config/options for how charts should behave when hiding/filtering, etc.

Happy to jump on a zoom or provide more detail.

[nickofthyme]

@kmartastic The axis alignment is off because of this issue elastic/elastic-charts#350 but for now that is expected behavior. In the future we plan to have compacting logic to clean up this behavior.

To your point on animated transitions, I agree that would be helpful. We removed the feature a while ago due to some complications (elastic/elastic-charts#164) but have not yet prioritized re-enabling the feature.

[wylieconlon]

Is the issue in elastic-charts a clear an unambiguous fix for this, or is there more discussion needed? I'd like to change the title of this issue if we've already decided on the solution.

[nickofthyme]

@wylieconlon Not sure, @monfera is working on this actively for the small multiples functionality (elastic/elastic-charts#500). Maybe he or @markov00 might have better insights.

[markov00]

I've missed the followup here sorry, yes the elastic/elastic-charts#350 issue has everything we need to fix it.
The fix will probably be exposed as a chart configuration, it could be probably configured as default behavior on categorical charts