Skip to content
InsightCharts

Search

Search guides and components

Block bars

Compares 3 to 12 values as thick rounded bars from a zero baseline, with each value printed inside the end of its bar and the category beneath.

Use when
A short series or ranking that should read as a bold graphic with no axis: ticket sales in each of six years, two paired measures in five regions. Add detail for a second small figure above each bar and marker for an event between two bars.
Avoid when
More than 12 bars, more than two series or stacked parts (use bar chart); negative values (use diverging bar chart); a long time series (use line chart); values that differ by more than about 50 times, where the short bars vanish (use proportional area).

Preview

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

2 infographics use block bars.

Infographics

2

Count poster

A poster that counts at scale. Blocks of thousands of unit icons fill most of the sheet, a second band counts reference groups with the same icon at the same size in a muted colour, and a bottom row holds three small graphics: squares sized by area with a ratio bracket, thick bars with the numbers inside, and shares as nested outlines or filled silhouettes.

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/block-bar

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

Examples

Paired series

Highlight, click to select

Stress: twelve bars, long labels, uneven values

Props

PropTypeDefaultDescription
namerequiredstringCategory field: one bar (or one pair of bars) per value.
valuerequiredstring | string[]Value field, or two fields for paired bars.
seriesstringField that splits long-format rows into paired series.
detailstringField holding a short secondary label printed above each bar, e.g. "3.5% of GDP".
marker{ after: string; label?: string }A dotted line after the named category, marking an event, with an optional label.
orientation"auto" | "vertical" | "horizontal""auto"auto draws columns and switches to horizontal bars on narrow widths.
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>.