rotate text labels with VegaLite in Observable

Community Help
1

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.

Screen Shot 2021-01-06 at 9.56.51 AM
Screen Shot 2021-01-06 at 9.56.51 AM1604×574 12.8 KB

2

When you are using “column” (or “row”), you need to use “header” instead of “axis”. So in this case I think you’d add something like
header: {labelAngle: -90}
to your column specification.

See Header | Vega-Lite

However, unfortunately it looks like there are some bugs in Vega-Lite which mean that changing the angle and orientation of these labels doesn’t work very well: