BumpChart

Ranking-over-stages chart that shows who led and who overtook whom.

A token-driven bump chart for tracking finishing rank across an ordered sequence of stages (e.g. the four games of one Friday). Each series is a competitor; its 1-based `ranks` are plotted with rank 1 drawn at the top, connected by lines so crossings reveal overtakes. The x-axis uses a `scalePoint` over `stages`, the y-axis runs integer rank ticks top-down, and `showLabels` puts each series name at its last node (direct labelling). Every node is keyboard-focusable with an accessible tooltip, series absent from a stage (non-finite rank) are skipped while the line still connects present nodes, and empty input shows an em-dash placeholder.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { BumpChart } from 'dssoca';

  const stages = ['G1', 'G2', 'G3', 'G4'];
  const series = [
    { label: 'Ana', ranks: [1, 2, 1, 1] },
    { label: 'Bruno', ranks: [2, 1, 3, 2] },
    { label: 'Caio', ranks: [3, 4, 2, 3] },
  ];
</script>

<BumpChart {series} {stages} />

Props

Prop	Type	Default	Description
`series`	`BumpSeries[]`	—	Required. Each series has a `label`, 1-based `ranks` (length must match `stages`) and optional `color`.
`stages`	`string[]`	—	Required. Ordered x-axis category labels (e.g. ["G1","G2","G3","G4"]).
`showLabels`	`boolean`	`true`	Draw each series label at its last node (direct labelling).
`height`	`number`	`280`	Intrinsic drawing height in px.
`width`	`number`	`480`	Intrinsic drawing width in px.
`fluid`	`boolean`	`false`	Stretch to the container width via the viewBox.
`tooltip`	`boolean`	`true`	Reveal a tooltip on hover/focus of a node. Each node is keyboard-focusable.
`summary`	`string`	—	Screen-reader summary + accessible name; auto-generated when absent.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.