Comparison · Intermediate

Slope chart

Change in size and rank between two points in time.

Use when: Comparing just two points in time, such as last year's and this year's share
Avoid when: 3 or more points in time (use a line or bump chart)

Try it

Reduce motion

Slope chart

Market share by brand (%)

Slope chart data
Our brand	2024 18% → 2025 27%
Brand A	2024 31% → 2025 28%
Brand B	2024 24% → 2025 21%
Brand C	2024 15% → 2025 14%
Brand D	2024 12% → 2025 10%

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Code

SlopeChart.tsx

import { ChartCard, SlopeChart } from "ztd-charts";

const data = [
  {"brand":"Our brand","period":"2024","share":18},
  {"brand":"Our brand","period":"2025","share":27},
  {"brand":"Brand A","period":"2024","share":31},
  {"brand":"Brand A","period":"2025","share":28},
  {"brand":"Brand B","period":"2024","share":24},
  {"brand":"Brand B","period":"2025","share":21},
  // … 4 more rows
];

export function Example() {
  return (
    <ChartCard number="21" title="Slope chart" subtitle="Market share by brand (%)" takeaway="Only we rose sharply" level="intermediate" replay>
      <SlopeChart
        data={data}
        label="brand"
        x="period"
        value="share"
        unit="%"
      />
    </ChartCard>
  );
}

Props

<SlopeChart> takes these props. Rows marked Common work the same on every chart.

28 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`label`RequiredItem name fieldstring \| (d, i) => string	string \| (d, i) => string	-	Item name field
`x`Period field (long tables)string \| (d, i) => string	string \| (d, i) => string	-	Period field (long tables)
`value`Value field (long tables)string \| (d, i) => number	string \| (d, i) => number	-	Value field (long tables)
`start`Wide table: start value fieldstring	string	-	Wide table: start value field
`end`Wide table: end value fieldstring	string	-	Wide table: end value field
`periodLabels`Titles above the two axesstring[]	string[]	-	Titles above the two axes
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Code

Props

Also in Comparison