Grouped series

Series lay out side by side within each category slot when they share a group id from seriesGroups (clustered bars). As with stacks, a sole configured group is joined automatically, so declaring it is the only wiring needed.

Open in demo ↗

// With exactly one entry in seriesGroups, every series defaults its
// `group` to that group's id and the bars lay out side by side.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Signups by Channel' },
  categoryAxis: { property: 'quarter', type: 'string', scale: 'ordinal' },
  seriesDefaults: { renderer: 'bar' },
  series: [
    { property: 'organic', title: 'Organic' },
    { property: 'paid', title: 'Paid' },
    { property: 'referral', title: 'Referral' }
  ],
  seriesGroups: [{ id: 'channels' }]
};

export const data = [
  { quarter: 'Q1', organic: 18, paid: 12, referral: 6 },
  { quarter: 'Q2', organic: 22, paid: 15, referral: 9 },
  { quarter: 'Q3', organic: 26, paid: 13, referral: 12 },
  { quarter: 'Q4', organic: 31, paid: 18, referral: 14 }
];

export const altData = [
  { quarter: 'Q1', organic: 24, paid: 9, referral: 10 },
  { quarter: 'Q2', organic: 17, paid: 21, referral: 7 },
  { quarter: 'Q3', organic: 29, paid: 16, referral: 15 },
  { quarter: 'Q4', organic: 25, paid: 23, referral: 11 }
];

Variations

• Opt a series out of the cluster with group: null, e.g. to overlay a line across the grouped bars.
• Tune the spacing between and around clusters with categoryPaddingFraction on the category axis: inner is the gap between the bars of a cluster, outer the gap between neighbouring categories.
• Grouping and stacking can coexist: series in the same stack occupy one slot of the cluster, so two stacks side by side make paired stacked bars. Put every series of both stacks in one group. The Stacked & Grouped demo in the gallery shows the result. A stack cannot span groups: its series must all share one group, which validation enforces.
• The config fixes the cluster's sub-slots, one per stack and one per unstacked series, so filtering a series out through the legend empties its slot and leaves the remaining bars where they are. The cluster keeps the width and the spacing it started with.
• To overlay a narrower bar on a full-width one instead (a measure over its backing range), leave the series ungrouped and shrink the overlay with bar.widthFraction; bar.alignFraction then places it within the slot (0.5 centers). Both also apply inside a group sub-slot: the OHLC recipe uses them to put open and close ticks either side of one bar.