Skip to content
InsightCharts

Search

Search guides and components

Strip plot

Shows every observation as a tick or dot along a value axis, one row per category.

Use when
Comparing the spread and clustering of a numeric value across 2 to about 15 categories when there are few enough observations to show each one; many rows with few to a few hundred observations each.
Avoid when
A single group where the shape matters (use histogram or beeswarm chart); when individual points must be identifiable or coloured (use beeswarm chart); when only quartiles matter (use box plot).

Preview

The median Friday commute took 40.5 minutes

Door-to-door commute time, 12 weeks of trips by weekday. The heavy tick is the median.

Illustrative data

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

No molecule or template lists strip plot in its composes. It still fits any slot that takes a component.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/strip-plot

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 { StripPlot } from "insightcharts";

Examples

Barcode: 1,120 listings, sorted by median

Monthly rent of one-bedroom listings in 8 US cities

US$ per month, 140 listings per city. The heavy tick is the median.

Illustrative data

Dots with jitter, long labels

Exam scores at 6 schools

Exam scores out of 100, 28 pupils per school

Illustrative data

Stress: 20 rows

Days to close a ticket, 20 teams

Days to close, 40 tickets per team

Illustrative data

Props

PropTypeDefaultDescription
valuerequiredstringNumeric field positioning each mark.
grouprequiredstringCategory field: one row per distinct value.
labelstringField naming each observation, for the tooltip.
mark"tick" | "dot""tick"Thin vertical ticks (a barcode) or translucent dots.
medianbooleanfalseHeavier tick at each row's median, with its value printed.
sort"none" | "asc" | "desc""none"Order rows by median.
jitterbooleanfalseDeterministic vertical spread for dots, to relieve overplotting.
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>.