← All updates

Horizontal bar charts in templates

chart() gains horizontal: true, drawing bars left-to-right with categories down the left axis — the form to use for ranked lists and long category names.

dslbuildercharts

chart() can now draw horizontal bars: pass horizontal: true on a type: "bar" chart and the bars run left-to-right, with the categories down the left axis in your data's order (first row at the top). It is the form to use for ranked lists and long category names — top customers, spend by department, survey answers — which vertical bars have to thin out or truncate.

chart({
  type: "bar",
  data: "{{spend}}",
  x: "department",
  y: "amount",
  horizontal: true,
  width: 480,
  height: 220,
});

The option names keep their meaning rather than their position: x-title still labels the category axis (drawn down the left side) and y-title the value axis (under the numbers), and y-min / y-max still bound the value axis. Category labels are right-aligned against the axis and truncated when they need more than 35% of the chart width, and a chart with so many categories that the bars would be thinner than 2pt — or that no row is tall enough for its label — draws the "Chart too small" placeholder with a warning instead of unreadable slivers.

It combines with stacked: true for horizontal stacked bars, and generated alt text is prefixed "Horizontal bar chart" / "Horizontal stacked bar chart" so screen-reader users hear the orientation. Full option list: pdf-template-author.md §Charts.