javascript - rotate text labels with VegaLite in Observable

Question

I can't find a way to rotate the text labels for the "Name" labels up top. I am working in Observable notebook. Here is the code:

vegalite({
  width: 50,
  data: { values: StackVega },
  mark: 'bar',
  encoding: {
    column: {
      field: "new_name",
      type: "nominal",
      spacing: 2,
      title: "Name"
      // rotate:
    },
    y: {
      type: "quantitative",
      aggregate: "sum",
      field: "new_rate",
      title: "Rate",
      axis: { grid: false }
    },
    x: { type: "nominal", field: "stat", axis: { title: "" } },
    color: {
      type: "nominal",
      field: "stat",
      scale: { range: ["#675193", "#ca8861"] }
    }
  },
  config: {
    view: { stroke: "transparent" },
    axis: { domainWidth: 1 }
  }
})

I have tried to add axis: { labelAngle: -50 } but that didn't do anything.

Answer 1

For the column encoding, you need to use header: {labelAngle: -50}.

See Header for more information.

Here is an example adapted from https://vega.github.io/editor/#/examples/vega-lite/bar_grouped (open in editor):