X axis label overlapping in vega lite chart

Question

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)

Answer 1

{
  "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"}}
}