Hello all,
I created a dashboard in Kibana and included also some Vega visualizations. My problem is that I cannot make the Vega bar chart responsive in sense of dynamically adjusting the size when the window size changes:
The bar chart on the dashboard
Settings:
autosize: {
type: "fit",
contains: "padding",
resize: true,
}
The bar chart after resizing - data does not adjust to the window
I also tried to follow the instructions here Customizing Size | Vega-Lite and used setting width or height to "container", but nothing worked, or I am defining them incorrectly.
The complete Vega specification is available below:
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
title: Test
autosize: {
type: "fit",
contains: "padding",
resize: true,
},
// Define the data source
data: {
url: {
%context%: true
%timefield%: time
index: test
body: {
"aggs":{
"date_hist":{
"date_histogram": {
"field": "time",
"calendar_interval": "day",
"format": "strict_date"
},
"aggs":{
"state":{
"terms": {
"field": "f.keyword",
"include":["active","revoked"],
"min_doc_count": 0,
"size": 10000
}
},
"increased":{
"bucket_script": {
"buckets_path": {
"in": "state['active']>_count",
"out": "state['revoked']>_count"
},
"script": "params.in - params.out"
}
},
"active_patients":{
"cumulative_sum": {
"buckets_path": "increased"
}
}
}
}
},
"size":0
}
}
format: {property: "aggregations.date_hist.buckets"}
}
mark: bar
encoding: {
x: {
field: key_as_string
type: ordinal
axis: {title: "Date", "labelAngle": 45}
}
y: {
field: active_patients.value
type: quantitative
axis: {title: " "}
}
"color": {"value": "#00A6CE "}
}
}
I would appreciate any assistance!