I want to create chart like time table structure 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 . Editor link
i want like this label of x axis----
Ravi kumar
sharma pcm
(chemistry-sec
tion a,b)
{
"width": 600,
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"Day": "Monday",
"Teacher Name": ["Ravi kumar","sharma pcm","(chemistry-section a,b)"],
"Date": "2023/12/01",
"Count": 10,
"color_code": "#27AE60"
},
{
"Day": "Tuesday",
"Teacher Name": "Sandep kumar sharma pcm (chemistry-section c,d",
"Date": "2023/11/01",
"Count": 1,
"color_code": "#FED380"
},
{
"Day": "Wednesday",
"Teacher Name": "Manoj(PHYSICAL)",
"Date": "2023/10/15",
"Count": 24,
"color_code": "#FB9273"
},
{
"Day": "Thuresday",
"Teacher Name": "Amit(Eng)",
"Date": "2024/02/01",
"Count": 29,
"color_code": "#F8696B"
}
]
},
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"y": {"field": "Day", "type": "nominal", "axis": {"grid": false}},
"x": {
"field": "Teacher Name",
"type": "nominal",
"axis": {
"orient": "top",
"grid": false,
"ticks": false,
"labelAngle": 0, "labelPadding":30
}
},
"color": {"field": "color_code", "legend": null}
}
},
{
"mark": "text",
"encoding": {
"y": {"field": "Day", "type": "nominal"},
"x": {
"field": "Teacher Name",
"type": "nominal",
"axis": {"orient": "top"}
},
"text": {"field": "Count", "type": "quantitative"},
"color": {"value": "black"}
}
}
],
"config": {"axis": {"grid": true, "tickBand": "extent"}}
}