Vega Lite / Kibana - Area Mark shows no values - elasticsearch

Question

I have a pretty straightforward problem but I'm totally new to Vega/Vega-Lite and the tutorials examples don't help me much to resolve my issue.
When I try to display my floating point values only Mark: Point/Bar seems to work. Everything else that demands a connection between neighboring points seems to fail, like "Area" or "Line".
What have I missed in order to connect my values to a Area-Chart?
Aggregation? Layer? Is the timestamp values calculation wrong?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": {
"%context%": true,
"%timefield%": "#timestamp",
"index": "default-*",
"body": {"size": 10000, "_source": ["#timestamp", "numericData"]}
},
"format": {"property": "hits.hits"}
},
"transform": [
{"calculate": "toDate(datum._source['#timestamp'])", "as": "time"}
],
"vconcat": [
{
"width": 1200,
"mark": {"type": "area", "line": true, "point": true},
"encoding": {
"x": {
"field": "time",
"scale": {"domain": {"selection": "brush"}},
"type": "temporal",
"axis": {"title": ""}
},
"y": {
"field": "_source.numericData",
"type": "quantitative",
"scale": {"domain": [0, 10]}
}
}
},
{
"width": 1200,
"height": 60,
"mark": {"type": "area", "line": true, "point": true}, // <-- only points are rendered :(
"selection": {"brush": {"type": "interval", "encodings": ["x"]}},
"encoding": {
"x": {"field": "time", "type": "temporal"},
"y": {
"field": "_source.numericData",
"type": "quantitative",
"formatType": "String",
"axis": {"tickCount": 3, "grid": false}
}
}
}
]
}
Points are visible - the values are there but the Area doesn't get rendered because, I suspect, I need to tell Vega Lite to interpret the numerical float values on Y to be interpreted over the whole timefield.

Answer 1

You didn't share your data, so I can only guess why this is happening. But one reason you might see this result is if there are null values interspersed in your data. Here is a simple example of this (open in editor):
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": null},
{"x": 3, "y": 2},
{"x": 4, "y": null},
{"x": 5, "y": 3},
{"x": 6, "y": null}
]
},
"mark": {"type": "area", "point": true, "line": true},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}
Unlike ponts, lines and areas are defined not via single values, but via adjacent values. Because there are no pairs of adjacent non-null values, there is no place where a line or area will be drawn.
If this is the case, you can remove the null points with an appropriate filter transform (open in editor):
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": null},
{"x": 3, "y": 2},
{"x": 4, "y": null},
{"x": 5, "y": 3},
{"x": 6, "y": null}
]
},
"transform": [{"filter": "isValid(datum.y)"}],
"mark": {"type": "area", "point": true, "line": true},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}