Search code examples
vega-litevega

Vega-Lite X-axis labels not showing in full

In Vega-Lite x-axis label names for bit long, so I have made that to an angle,

the label not showing in full, is it possible to make it visible in full,

also in the tooltip the window not showing full, name going out of window, is it possible to make the window bigger or wrap the text?

Also not all ticks of x-axis showing the label, only alternate ones are showing, how to correct that as well

![enter image description here

The full label supposed to be, example:

creditloandata-extratreesclassifier-24nov2020-14h45m58s
Solution

  • You need to set the labelLimit axis property; for example (open in editor):

    {
  "data": {
    "values": [
      {"x": "creditloandata-extratreesclassifier-24nov2020-14h45m58s", "y": 1},
      {"x": "creditloandata-extratreesclassifier-24nov2020-15h45m58s", "y": 2},
      {"x": "creditloandata-extratreesclassifier-24nov2020-16h45m58s", "y": 3}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {
      "field": "x",
      "type": "nominal",
      "axis": {"labelAngle": -30, "labelLimit": 0}
    },
    "y": {"field": "y", "type": "quantitative"}
  },
  "width": 400
}

    enter image description here

    The default labelLimit is 100, which means the labels are truncated past 100 pixels. You can set it to a higher value, or set it to zero to indicate that there should be no limit. See the Vega-Lite Axis Documentation for more information.