Dynamic range in Kibana chart axis

[qd-danh (Dan H)]

I have found some previous questions about this, but nothing from recent versions, and all just enough different that they don't apply.

To dumb it way down, I want my Kibana Vega-Lite line chart to have a dynamic y-axis min/max, depending on the set of data in the result. Simple example: sometimes my data goes from 100 - 500, other times it's 2500-4500, etc. I don't want the line chart to be hardcoded to go from 0 to N. I think I have this right, that the DATA is the domain and the rendered visual boundaries are the range. So I think I'm asking to set the range dynamically based on the data.

I think this documentation is close to what I want. Setting the range based on values in a field. (docs say range can be of type FieldRange but with no further mention of what exactly that is)

EXAMPLE: I used the line chart example in vega (lite) editor and have this dumbed down example to show the problem.
-- Uncomment the line below //TRYING THIS, and get error to see it

Goal is to have the Y axis for this particular data start at say 100 instead of the default 0, and not have to guess or hardcode the axis limits.

Anybody have a good way to set the Y axis dynamically?

[Andrew_Tate (Drew Tate)]

AFAICT you have identified a legitimate bug in Vega-Lite.

Vega-Lite specs compile down to Vega specs and you've found a case that they're getting wrong.

To see what I mean, take your example, uncomment the problematic line, click "Compiled Vega," and then "Edit Vega Spec." You should see the following

As you can see from the docs, "range" in Vega is not allowed to look anything like this. I'd recommend filing an issue with the Vega-Lite project.

I'm pretty certain any workaround would involve writing your visualization in Vega instead of Vega-Lite. I thought maybe I could define a Vega signal to represent the minimum value since signal references are allowed in the "range" but no luck on my end. Will follow up if anything else occurs to me.

[qd-danh (Dan H)]

Interesting, thank you for the insight @Andrew_Tate. I see the resulting compile error via the steps you outline. I will file and issue.

I'm still confused about the syntax and (lack of) capability, even in Vega. If I'm following this correctly, I'm now using Vega (using the compiled version via the editor) and still don't get the functionality where the Y axis is dynamically computed based on data (thought your mention of "involve writing your visualization in Vega instead of Vega-Lite)

When editing the compiled Vega script:

• Removed the offensive compile error content
• Change Y domain to "domain": [2000,3000] (fixed values to experiment)
• Change Y range to "range" : [200,0]
• To further illustrate the ask: increased the stock prices for all GOOG entries to be 1000 higher. (just want the values to be much higher than the default Y min of 0)

I think I am realizing that I am actually not wanting the RANGE to be dynamic (that's just the range of pixels used to render the values from DOMAIN of data). I realize that by experimenting with the range values in the fixed array and see the rendered sizing gets screwed up.

So even when using "domain": {"data": "data_0", "field": "price"}, "range" : [200,0], and the docs say Vega will compute the min, max - Vega still seems to come up with 0 as the min.

Here is the modified spec in the Vega Editor, that produces the output below.

Thanks again for the help Andrew.

p.s. coming back with one more piece of evidence. If I change one of the stock prices for GOOG to a negative number, Vega does the right thing, and extends the domain down to that negative number (plus some padding). So it IS computing a proper min in that case and rendering the chart correctly. It's just that when all the values are positive, it's coming up with 0 as the min.

[Andrew_Tate (Drew Tate)]

@qd-danh I totally follow what you're asking and you've done some good experimentation. I wish I could be more helpful. Maybe someone else will chime in.

That said, since your question is really about Vega instead of our Kibana-specific integration, you might consider reaching out to the Vega community directly for help. At the bottom of their Github README they link to their forum and to a Slack workspace you can use to ask questions.

If you crack this, definitely feel free to post your solution here.

[qd-danh (Dan H)]

Well it seems putting this aside for a couple days helped. It turns out the answer is right there staring at me in the screenshot in my last post. Found it by way of some other examples that are using this property.

The Scale object has a zero property, that indicates whether to include the 0 data point or not (default is true).

Going back to Vega-Lite, we replace the problematic scale setting that was trying to use the data field, with these simple 2 lines.

"scale": { 
  "zero" : false, 
  "padding" : 10 
}

Combined with the padding property, we can make the graph look nice.

Here is an updated, working spec in the vega editor.

Sorry @Andrew_Tate for crossing that blurry line between your Vega integration into Elastic / Kibana vs. the Vega(-lite) spec itself. Thank you again for the replies.

[Andrew_Tate (Drew Tate)]

Nice find, @qd-danh . I'm sure this will help others.

Like you say, it's a blurry line. Questions like this are definitely fair game on the forum.