I want to create chart in Vega lite but facing issue while x axis label is overlapping. I want x axis label not overlap it must break if it going out of rect box size and just display below it and map that values in scroller too i.e.(concat1). editor link
i want like this label of x axis----
AEROPLANE
FLY
DAILY
i tried using list data-type but getting issues when using list of string values in scroller..
{
"data": {
"values": [
{"Key_data": "a", "description": "AEROPLANE"},
{"Key_data": "b", "description": "AEROPLANE FLY DAILY"},
{"Key_data": "c", "description": "FLY DAILY"},
{"Key_data": "d", "description": "HELICOPTER"},
{"Key_data": "d", "description": "HIGH BLOOD PRESSURE"}
]
},
"columns": 1,
"concat": [
{
"width": 700,
"height": 350,
"transform": [{"filter": {"param": "brush"}}],
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"y": {"field": "Key_data", "type": "nominal"},
"x": {
"field": "description",
"type": "nominal",
"axis": {
"orient": "top",
"labelAngle": 0,
"labelExpr": "split(datum.label,' ')",
"labelPadding": 25
}
}
}
}
]
},
{
"width": 700,
"height": 30,
"mark": "area",
"encoding": {
"x": {"field": "description", "type": "nominal", "axis": null},
"y": {"field": "Key_data", "type": "nominal", "axis": null}
},
"params": [
{
"name": "brush",
"value": [
"AEROPLANE",
"AEROPLANE FLY DAILY",
"FLY DAILY",
"HELICOPTER",
"HIGH BLOOD PRESSURE"
],
"select": {"type": "interval", "encodings": ["x"]}
}
]
}
]
}