Charts

Bump

A bump chart showing ranking changes over time with smooth connecting lines.

import { Bump } from "metricui";

Use Bump for competitive rankings — product performance over quarters, team standings over sprints, feature adoption over releases. Supports flat-row mode (auto-ranking by value) and Nivo-native series format. For absolute value trends use LineChart; for categorical comparison use BarChart.

Basic Example

Pass flat rows with an index column and categories for each series. Values represent rank positions (1 = top).

Product Rankings by Quarter

<Bump
  data={[
    { quarter: "Q1", "Product A": 1, "Product B": 3, "Product C": 2, "Product D": 4 },
    { quarter: "Q2", "Product A": 2, "Product B": 1, "Product C": 3, "Product D": 4 },
    { quarter: "Q3", "Product A": 1, "Product B": 2, "Product C": 4, "Product D": 3 },
    { quarter: "Q4", "Product A": 3, "Product B": 1, "Product C": 2, "Product D": 4 },
  ]}
  index="quarter"
  categories={["Product A", "Product B", "Product C", "Product D"]}
  title="Product Rankings by Quarter"
  height={300}
/>

Custom Line Width

Use the lineWidth and pointSize props to control line thickness and dot size.

Thick Lines

<Bump
  data={rankingData}
  index="quarter"
  categories={["Product A", "Product B", "Product C", "Product D"]}
  title="Thick Lines"
  lineWidth={5}
  pointSize={12}
  height={300}
/>

Start & End Labels

Bump automatically displays start and end labels for each series, making it easy to identify lines without needing a separate legend. Labels are colored to match their series. Set legend={false} to rely solely on labels.

Rankings with Labels Only

<Bump
  data={rankingData}
  index="quarter"
  categories={["Product A", "Product B", "Product C", "Product D"]}
  title="Rankings with Labels Only"
  legend={false}
  height={300}
/>

Props

Prop	Type	Default	Description
`data`	`BumpSeries[] \| DataRow[]`	—	Nivo-native BumpSeries[] ({ id, data: [{ x, y }] }) or flat DataRow[] with index + categories (values auto-ranked).
`index`	`string`	—	Column for x-axis labels (flat format). Auto-inferred if omitted.
`categories`	`Category[]`	—	Category columns — each becomes a ranked series (flat format). Auto-inferred if omitted.
`title`	`string`	—	Chart card title.
`subtitle`	`string`	—	Chart card subtitle.
`description`	`string \| React.ReactNode`	—	Description popover content.
`footnote`	`string`	—	Footnote.
`action`	`React.ReactNode`	—	Action slot.
`format`	`FormatOption`	—	Format for value labels and tooltips.
`height`	`number`	`300`	Chart height in px.
`colors`	`string[]`	—	Series colors.
`animate`	`boolean`	`true`	Enable/disable animation.
`lineWidth`	`number`	`3`	Line width.
`pointSize`	`number`	`8`	Point size at each position.
`pointBorderWidth`	`number`	`2`	Point border width.
`legend`	`boolean \| LegendConfig`	—	Legend configuration. Default: shown for multi-series.
`crossFilter`	`boolean \| { field?: string }`	—	Enable cross-filtering. true uses series id as the field.
`drillDown`	`true \| ((event: { id: string; x: string \| number; y: number }) => React.ReactNode)`	—	Drill-down. true = auto table, function = custom content.
`drillDownMode`	`"slide-over" \| "modal"`	`"slide-over"`	Drill-down presentation mode.
`tooltipHint`	`boolean \| string`	—	Tooltip action hint.
`variant`	`CardVariant`	—	Card variant.
`dense`	`boolean`	—	Compact layout.
`className`	`string`	—	Additional CSS class names.
`classNames`	`{ root?: string; header?: string; chart?: string; body?: string; legend?: string }`	—	Sub-element class name overrides.
`id`	`string`	—	HTML id attribute.
`data-testid`	`string`	—	Test id.
`loading`	`boolean`	—	Loading state.
`empty`	`EmptyState`	—	Empty state configuration.
`error`	`ErrorState`	—	Error state configuration.
`stale`	`StaleState`	—	Stale data indicator.

Data Shape

// Nivo-native format
interface BumpSeries {
  id: string;
  data: { x: string | number; y: number | null }[];
}

// Flat-row format (auto-ranked by descending value at each x-position)
const rows = [
  { month: "Jan", "Product A": 500, "Product B": 800, "Product C": 300 },
  { month: "Feb", "Product A": 700, "Product B": 600, "Product C": 400 },
  { month: "Mar", "Product A": 900, "Product B": 750, "Product C": 850 },
];
// index="month" categories={["Product A", "Product B", "Product C"]}
// Ranks: Jan: B=#1, A=#2, C=#3; Feb: A=#1, B=#2, C=#3; Mar: A=#1, C=#2, B=#3

Notes

Uses forwardRef.
Flat DataRow[] mode auto-ranks values by descending order at each x-position. Rank 1 = highest value.
Start and end labels are shown by default, positioned outside the chart area with padding.
Bump charts need generous left/right margins for labels — the component auto-adjusts margins based on container width.
Install @nivo/bump as a peer dependency.
The aiContext prop (inherited from BaseComponentProps) adds business context for AI Insights analysis. See the AI Insights guide for details.