[ES|QL] No data displays in ES|QL charts when user switches from table to a bar chart

[bhavyarm]

Kibana version: 8.14.0 BC7

Browser version: chrome latest

Browser OS version: OS X

Original install method (e.g. download page, yum, from source, etc.): from staging

Describe the bug: If user switches from table to one of the bar charts on Create ES|QL visualization on a simple query like from kibana_sample_data_logs | limit 1000, Kibana displays empty panel.

Steps to reproduce:

1. Go to dashboard -> edit-> add es|ql panel
2. ES|QL panels gets added with sample logs data table
3. Edit the query to kibana_sample_data_logs | limit 1000 and run it - make sure the table gets updated
4. Change the chart type to vertical in bar charts
5. Kibana displays xy chart but no bars on it
6. Switch the chart type to a non -bar type chart like something from proportion
7. Data gets displayed

Screenshots (if relevant):

no_data.mp4

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[elasticmachine]

Pinging @elastic/kibana-esql (Team:ESQL)

[stratoula]

This is not a bug although I do understand the confusion. If you see what is going on it adds the @timestamp in the horizontal axis but it the raw value (no date_truck or bucket used) so EC do not render the bars correectly

@nickofthyme maybe you can explain why this happens. I think a warning in ase of raw timestamps is a good idea. We are already exploring this idea here #184205

Not sure if we need 2 issues to track this but I will let this to the viz team to decide

[markov00]

@stratoula I believe this error on rendering is related to the fact that the @timestamp column seems not typed as date in the lens configuration. Can you please check if is possible to pass that parameter when clear column type is available?
In this case, it seems that we are interpreting the timestamp as number (the axis shown is a numeric one).

The other problem, as linked by Stratoula relates to the fact that, to render bars we need to understand what is the bar width. We internally compute it as the minimum distance between consecutive time buckets (to avoid overlaps) but in this case it seems that the bar width is too small to be even visible.

[stratoula]

Interesting. Have you checked that or you are assuming from seeing the chart?

[stratoula]

@markov00 no, it remains a date field, something else is going wrong here. I guess it what I mention above but is better to check it too. But the field type is correct, I checked

[markov00]

oh strange, so there is something else wrong because the axis style is definitely wrong

[stratoula]

It tries to render dates though

[dej611]

From my tests the bug affects only non-stacked versions of the bar chart.
Debugging the state of the component in the video, it seems that this check is failing:

kibana/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

Lines 672 to 675 in ab6ecdb

	const isHistogramModeEnabled = dataLayers.some(
	({ isHistogram, seriesType, isStacked }) =>
	isHistogram && (isStacked || seriesType !== SeriesTypes.BAR || !chartHasMoreThanOneBarSeries)
	);

So the new time axis mode is not enabled, leaving to "simple" dates to render on the X-axis:

kibana/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

Lines 677 to 678 in ab6ecdb

	const shouldUseNewTimeAxis =
	isTimeViz && isHistogramModeEnabled && !useLegacyTimeAxis && !shouldRotate;

[dej611]

The root problem is this check:

kibana/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

Lines 396 to 401 in ab6ecdb

	const chartHasMoreThanOneBarSeries =
	filteredBarLayers.length > 1 ||
	filteredBarLayers.some((layer) => layer.accessors.length > 1) ||
	filteredBarLayers.some(
	(layer) => isDataLayer(layer) && layer.splitAccessors && layer.splitAccessors.length
	);

When transitioning from table to Vertical Bar a breakdown dimension is automatically added to the Lens configuration, and that disables the new time axis. It's the equivalent for form-based configuration, the granularity of the date histogram here makes it just worse, where a bar is less than a pixel.
Switching to stacked Vertical bar makes the bars appear again.

[stratoula]

@dej611 well done 👏 So this happens in DSL charts too, correct?

[dej611]

Yes, I can replicate the same behaviour with DSL charts as well. It's just that a bucket in DSL cannot be 1ms, so it does not look that bad.
Here's the smaller I could get for DSL:

[markov00]

I believe with a timestamp and a breakdown by a bar chart should always be shown as stacked bar, where instead a line/area chart can also be non-stacked by default.

[stratoula]

We never suggest it, Bhavya selected it from the chart switcher here

[markov00]

I've created elastic/elastic-charts#2461 to handle that on chart side by rendering at least 1px wide bars

[markov00]

Let's find a way to catch this before rendering and provide a suggestion to edit the query

[stratoula]

Why trying to suggest in the Lens level and not fix this elastic/elastic-charts#2461 which seems to me a better solution as it will apply to all charts? (this is not ES|QL specific case)