Vega Lite
Encoding
Axis

Vega-Lite Axis: How to Use labelAngle, labelExpr, and Other Axis Properties

If you are searching for vega-lite axis labelAngle property or vega axis examples, this page gives direct, copy-paste answers.

Axes in Vega-Lite control how your x and y scales are displayed: labels, ticks, title, domain line, and grid lines.

Quick Start: Axis Object in Encoding

Add an axis object under encoding.x or encoding.y.

{
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category",
      "type": "ordinal",
      "axis": { "labelAngle": -45 }
    },
    "y": { "field": "value", "type": "quantitative" }
  }
}

axis.labelAngle Property (Most Searched)

Use labelAngle to rotate axis labels and avoid overlap.

Default labels
`labelAngle: -45`

What is the default labelAngle in Vega-Lite?

  • For nominal or ordinal fields on the x-axis, Vega-Lite typically uses 270 (vertical labels).
  • For other axes, the default is generally 0 (horizontal labels).

If labels overlap, try -45, -30, or 0 and combine with labelOverlap / labelLimit.

High-Impact Axis Properties You Will Use Most

{
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "axis": {
        "labelAngle": -45,
        "labelFlush": true,
        "labelOverlap": "greedy",
        "tickCount": 6,
        "format": "%b %Y",
        "title": "Month"
      }
    },
    "y": {
      "field": "revenue",
      "type": "quantitative",
      "axis": {
        "grid": true,
        "gridColor": "#e5e7eb",
        "tickSize": 6
      }
    }
  }
}

axis.labelExpr with datum.label and datum.value

When default labels are not enough, use labelExpr to format text with Vega expressions.

{
  "encoding": {
    "y": {
      "field": "revenue",
      "type": "quantitative",
      "axis": {
        "labelExpr": "'$' + format(datum.value, ',.0f')"
      }
    }
  }
}

For categorical labels:

{
  "encoding": {
    "x": {
      "field": "segment",
      "type": "nominal",
      "axis": {
        "labelExpr": "upper(datum.label)"
      }
    }
  }
}

legend.labelExpr datum.label vs axis.labelExpr

Many people search for vega-lite legend labelExpr datum.label and vega legend labelExpr datum.label.

Both axis and legend support labelExpr, but they apply to different guides:

  • axis.labelExpr: tick labels on an axis.
  • legend.labelExpr: legend entry labels for color/size/shape scales.

Legend example:

{
  "encoding": {
    "color": {
      "field": "category",
      "type": "nominal",
      "legend": {
        "labelExpr": "upper(datum.label)"
      }
    }
  }
}

See the dedicated legend guide for more examples: Vega-Lite Legend.

Global Defaults with config.axis

Set reusable defaults once and keep chart specs cleaner.

{
  "config": {
    "axis": {
      "labelFontSize": 12,
      "labelColor": "#334155",
      "titleFontSize": 13,
      "gridColor": "#e2e8f0"
    }
  }
}

FAQ

How do I set the vega-lite axis labelAngle property?

Set it inside encoding.x.axis or encoding.y.axis:

{
  "encoding": {
    "x": {
      "field": "name",
      "type": "nominal",
      "axis": { "labelAngle": -45 }
    }
  }
}

What is vega-lite axis labelAngle default?

For nominal/ordinal x-axis labels, default is typically 270. For most other cases, default is 0.

Why is labelExpr not working?

Use Vega expression syntax (for example upper(datum.label)), not arbitrary JavaScript APIs. Also ensure your expression references datum.label or datum.value correctly.

How do I remove an axis?

Set axis to null:

{
  "encoding": {
    "x": {
      "field": "name",
      "type": "nominal",
      "axis": null
    }
  }
}
EncodingBand Position