Horizontal charts

Set plot.inverted and the chart swaps orientation: categories run down the side and values extend horizontally. Everything else — stacking, grouping, thresholds, animation — works unchanged.

Open in demo ↗

// plot.inverted swaps the axes: categories run down the left side and
// values extend horizontally.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Support Tickets by Team' },
  plot: { inverted: true },
  categoryAxis: { property: 'team', type: 'string', scale: 'ordinal' },
  seriesDefaults: { renderer: 'bar' },
  series: [{ property: 'tickets', title: 'Open tickets' }]
};

export const data = [
  { team: 'Platform', tickets: 34 },
  { team: 'Billing', tickets: 27 },
  { team: 'Mobile', tickets: 21 },
  { team: 'Integrations', tickets: 15 },
  { team: 'Onboarding', tickets: 9 }
];

export const altData = [
  { team: 'Platform', tickets: 22 },
  { team: 'Billing', tickets: 31 },
  { team: 'Mobile', tickets: 12 },
  { team: 'Integrations', tickets: 25 },
  { team: 'Onboarding', tickets: 17 }
];

How it works

• Axis positions follow the inversion: each axis's side picks the start (top/left) or end (bottom/right) edge, so the category axis lands on the left and the value axis on top by default; set side: 'end' on the value axis to move it below the plot.
• Long category labels usually fit better on a horizontal chart — combine with the category axis tickLabelTruncationEnabled settings when they still overflow.
• The staged animation phases are orientation-aware; axis expansion grows the value domain to the right instead of upward.