Skip to content
InsightCharts

Search

Search guides and components

Bubble scale

Places circles sized by one measure along a single value scale set by another, spread sideways so none overlap, with boxed scale marks instead of an axis.

Use when
A poster answer to "where does each one sit on this scale, and how big is it": 5 to about 40 named things with a rate or score (the scale) and a magnitude (the area), such as import dependency against share of demand.
Avoid when
Two measures that should be read against each other on two axes (use scatter chart); one measure only (use beeswarm chart or strip plot); precise comparison of the sizes (use bar chart); more than about 60 rows (use beeswarm chart).

Preview

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

1 infographic uses bubble scale.

Infographics

1

Flow poster

A portrait poster of where something comes from and where it goes, in three stacked bands painted in one colour: the producers as large labelled tiles, the leading producer's output fanning out as ribbons to an aligned column of destinations, and the destinations as bubbles on a scale of how much each depends on that producer.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/bubble-scale

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

Examples

Colour by series, horizontal

Highlight one circle, click to select

Stress: 40 circles crowded at one end, sizes from 1 to 900

Props

PropTypeDefaultDescription
namerequiredstringName field: one circle per row.
valuerequiredstringNumeric field that positions each circle along the scale. Printed with format.
sizerequiredstringNumeric field for circle area. Printed inside or beside each circle with sizeFormat.
seriesstringField that colours circles by category. Default: circles are shaded along the scale with the sequential ramp.
orientation"vertical" | "horizontal""vertical"Direction of the scale. Narrow containers always use vertical.
domain[number, number]Scale range. Default: the data extent rounded out to the tick step.
ticksnumber[]Values to mark on the scale. Default: about five round values.
scaleLabelstringShort name of the scale measure, printed at the head of the scale.
sizeFormatFormatSpecHow to print the size measure.
guidesbooleantrueThin dotted guide line at each scale mark.
namesRecord<string, string>Display names for series keys.
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>.