Skip to content
InsightCharts

Search

Search guides and components

Ribbon chart

One filled band per entity across periods: its thickness is its value in each period and its vertical position is its rank, so bands cross as the order changes.

Use when
4 to 8 entities over 4 to 10 periods when both the size of each and the changing order matter, and the graphic should read as one flowing form: market shares, harvests, medal tables, budget lines.
Avoid when
Totals that matter more than order, or a smooth centred stream of many periods (use area chart, which has stacked and stream modes); rank alone (use bump chart); more than 8 entities or 10 periods (use line chart or small multiples); values that can be negative (use line chart).

Preview

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

1 infographic uses ribbon chart.

Infographics

1

Timeline poster

A poster of change over a run of periods: a full-width ribbon of bands whose thickness is each entity's value and whose order is its rank (ribbon-chart), a strip of two to four dated figures under it, and a bottom row with one measure per period as thick bars (block-bar) and one share at several dates as nested outlines (nested-shares).

Installation

$ pnpm dlx shadcn@latest add @insightcharts/ribbon-chart

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { RibbonChart } from "insightcharts";

Examples

Long data, one highlighted

Ten entities, one colour each

Stress: 7 entities, 8 periods, thin bands

Props

PropTypeDefaultDescription
xrequiredstringPeriod field: one column of the ribbon per distinct value, in data order.
yrequiredstring | string[]Value field (long data), or one column per entity (wide data). Band thickness; negative values are drawn as zero.
seriesstringEntity field, for long data.
valuesbooleantruePrint each value inside its band at every period where it fits.
labels"both" | "end"Entity names at both ends, or only at the end. Default: both, end only on narrow screens.
namesRecord<string, string>Display names for entity keys.
colorBy"auto" | "series" | "none""auto"auto: the largest entities take the theme's colours and any past the palette size (at most 8) are grey. series: every band gets its own colour, the extra ones derived from the theme's own. none: every band in the accent.
Common chart props 29

Every chart built with defineChart accepts these on top of its own props.

PropTypeDescription
dataDataInputRows, CSV text, a URL, { url, path }, an async function, or an Arrow-style table. Omit inside <InsightData>.
transformTransform | Transform[]A pipeline of transforms applied before drawing.
titlestringThe title. One plain statement of what the data shows, with the number and the period ("Monthly churn fell from 4.2% to 2.1% in 2024"), or a plain label ("Monthly churn, 2024"). One clause, no figures of speech.
subtitlestringMeasure, unit, population, period.
sourcestringData source, shown as "Source: ...".
notestringMethod notes or caveats.
heightnumber | stringCSS height of the plot. Default 360.
aspectnumberWidth / height. Overrides height.
highlightstring | string[]The entity (or entities) the title is about. Every other series is drawn in grey.
annotationsAnnotation[]Reference lines, shaded bands and callouts, in data coordinates.
formatFormatSpecHow to print values: "compact", "percent", "currency:USD", "{value} kg", Intl options, or a function.
legendbooleanShow the legend. Default: shown when there are two or more series.
selectboolean | stringMake marks clickable to filter. Inside <InsightData> the selection filters every other chart. Pass a field name, or true to use the chart's category field.
onSelect(values: string[], field: string) => voidCalled with the selected values whenever the selection changes.
optionEChartsOption | ((option: EChartsOption, ctx: BuildContext) => EChartsOption)Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers.
themeThemeInputA theme, or a partial set of tokens merged over the surrounding theme, for this chart only.
modeModeInput"auto" (default) follows the page, "system" follows the OS, or force "light" / "dark".
rendererRendererInput"auto" (default) uses SVG for light charts and canvas for heavy ones.
animatebooleanSet false to disable animation. Reduced-motion preferences are always respected.
lazybooleanMount the chart only when it scrolls near the viewport. Default true.
groupstringLink tooltips with other charts sharing this group id.
exportableboolean | ExportFormat[]Show an export menu: true or a list of formats from png, jpeg, svg, pdf, csv, json.
tablebooleanShow a collapsible "View data" table under the chart.
altstringAccessible description: the chart type and measures, then the main pattern and the notable values.
idstringStable id for this chart's selection in the shared store.
onEventsRecord<string, ChartEventHandler>ECharts event handlers, e.g. { click: (params, chart) => {} }. Prefix a name with zr: to bind to the canvas itself.
onReady(chart: EChartsInstance) => voidCalled with the ECharts instance once it is created.
classNamestringClass name for the outer <figure>.
styleCSSPropertiesInline style for the outer <figure>.