visualizationvega-litevegavega-embedvega-lite-api

X axis label overlapping in vega lite chart


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)

Solution

  • enter image description here

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