bar chart - move the names of the columns to x-axis with vegalite and observable

Question

I am using VegaLite and working in Observable notebook. I need to swap the labels for the column up top and x-axis, so that I have the status on top and the names on the bottom x-axis.

vegalite({
  width: 50,
  data: { values: StackVega },
  mark: 'bar',
  encoding: {
    column: {
      field: "new_name",
      type: "nominal",
      spacing: 2,
      title: "Name",
    // axis: {orient: "bottom"}
    },
    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: {orient: "bottom"} but that didn't work and if I swap the fields with column and x it breaks the chart.

question from:https://stackoverflow.com/questions/65600358/move-the-names-of-the-columns-to-x-axis-with-vegalite-and-observable

Answer 1

Column labels are not controlled by axis, they are controlled by header. Use header: {"labelOrient": "bottom"}. See Header for more information.