Bar

import { bar } from 'visdelta/bar';

bar() compares categories through a shared quantitative baseline.

import { bar } from 'visdelta/bar';
import { transition } from 'visdelta/transition';
import 'visdelta/style.css';

const sales = [
  { region: 'North', channel: 'Online', revenue: 42 },
  { region: 'North', channel: 'Retail', revenue: 31 },
  { region: 'South', channel: 'Online', revenue: 28 },
  { region: 'South', channel: 'Retail', revenue: 36 },
  { region: 'East', channel: 'Online', revenue: 39 },
  { region: 'East', channel: 'Retail', revenue: 22 },
  { region: 'West', channel: 'Online', revenue: 47 },
  { region: 'West', channel: 'Retail', revenue: 26 },
];

const detailed = bar(sales)
  .x('region', { label: 'Region' })
  .y('revenue', { label: 'Revenue ($k)' })
  .key(['region', 'channel'])
  .breakdown('channel')
  .color('channel');

const from = detailed.rollup();
const to = detailed;

const change = await transition(from, to, { target: '#chart' });
change.play({ duration: 800 }); // or change.progress(0.5)

MethodsCopy Anchor Link

.breakdown() defaults to a stacked layout and the sum operator. It declares detail, not colour; add .color(field) when the segments should be coloured.

const detailed = bar(sales)
  .x('region')
  .y('revenue')
  .key(['region', 'channel'])
  .breakdown('channel')
  .color('channel');

const totals = detailed.rollup();
const grouped = detailed.layout('grouped');
const horizontal = detailed.flip();

Transition behaviourCopy Anchor Link

• Baselines are preserved. Entering and exiting bars grow from and shrink to the baseline.
• Additive splits stay readable. For sum and count, a total splitting into grouped detail passes through a stacked stage that preserves the total. The merge reuses the same frames backward.
• Reaggregation is composed. Regrouping the same records, for example from totals by year to totals by location, routes through their common grain.
• Focus and sorts are staged. A focused detail merges before the focus changes; detail merges before a sort by total.
• Orientation changes are coordinate transitions. .flip() uses Bar's direct coordinate route. A flip combined with a Grain change is not split into planner stages.

Bar marks always use square corners, in every layout and throughout transitions.

ExamplesCopy Anchor Link

Edit a Bar chart yourself in the playground: sort, split or regroup.

LimitsCopy Anchor Link

Bar's declaration planner supports one aggregate measure over inline rows, with a category and optional detail field. Wide folds, multiple aggregates, unresolved data, mismatched aliases or mark keys, and reorientation combined with a Grain change are outside it. Those pairs keep Bar's chart-authored route or its ordinary direct transition.