Skip to content
InsightCharts

Search

Search guides and components

Curve rank

Places each entity on two parallel scales, one per measure, and joins its two positions with a smooth S-curve labelled with the name and both values.

Use when
Two different measures of the same 4 to about 15 entities, when the point is how standing on one relates to standing on the other: price against sales, staff against output, cost against usage. Each side has its own scale, stated in its heading.
Avoid when
The same measure at two moments (use slope chart); ranks across many periods (use bump chart); more than about 15 entities or a statistical relationship (use scatter chart); exact comparison on one measure (use bar chart).

Preview

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

1 infographic uses curve rank.

Infographics

1

Matrix poster

One wide landscape graphic that compares 4 to 12 entities on five to seven measures: two measures as S-curves between parallel scales on the left, joined to a table on the right in which every other number is drawn as dots, squares, icons, a ring, a circle or a bar. Both halves share one row order and one colour per entity.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/curve-rank

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

Examples

One highlighted, log scale on the right

Ten entities, one colour each

Stress: 14 entities, close values, long names

Props

PropTypeDefaultDescription
namerequiredstringEntity field: one curve per row.
leftrequiredstringField for the left-hand measure.
rightrequiredstringField for the right-hand measure.
leftLabelstringHeading over the left rule: the measure and its unit. Defaults to the field name.
rightLabelstringHeading over the right rule. Defaults to the field name.
leftScale"linear" | "log""linear"Scale of the left measure. A log scale is stated in the heading.
rightScale"linear" | "log""linear"Scale of the right measure.
leftTop"high" | "low""high"Which end of the left measure sits at the top.
rightTop"high" | "low""high"Which end of the right measure sits at the top.
leftFormatFormatSpecHow to print left values. Defaults to format.
rightFormatFormatSpecHow to print right values. Defaults to format.
orderstring[]Entity names in the order that assigns colours. Pass the same list to glyph-table to match its row colours.
colorBy"series" | "none"series: one colour per entity; past the size of the theme's palette the extra colours are derived from the theme's own (glyph-table derives the same ones). none: every curve in the accent. Default: series while the entities fit the palette (at most 8), none beyond.
namesRecord<string, string>Display names for entity 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>.