SlopeChart

Live preview

Loading example…

Two columns, one line per category: the slope is the change. Labels with values sit on both sides and are nudged apart when values are close, so every name stays readable.

Import

import { SlopeChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/slope-chart.

Usage

<SlopeChart
  title="Citas por servicio: septiembre contra octubre"
  items={servicios}
  fromLabel="Septiembre"
  toLabel="Octubre"
  colorBy="direction"
  lowerIsBetter={false}
  valueFormat="integer"
  tooltip
  loading={false}
  animate
  deltaLabel="Cambio"
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`items` *	`readonly SlopeItem[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`fromLabel`	`string`	`"Before"`	Header of the left column, e.g. “Septiembre”.
`toLabel`	`string`	`"After"`	Header of the right column, e.g. “Octubre”.
`colorBy`	`"series" \| "direction"`	`"direction"`	“direction” colors by up, down or flat; “series” uses the palette.
`lowerIsBetter`	`boolean`	`false`	With `colorBy="direction"`, going down is the good news (e.g. cancellations).
`valueFormat`	`ValueFormat`
`height`	`number \| "fill"`		Height of the plot; by default it grows with the number of items.
`aspectRatio`	`number`		Width / height ratio; sizes the chart from the container width.
`legend`	`boolean`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`deltaLabel`	`string`	`"Change"`	Word for the change column of the data table and tooltip.
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/slope-chart/slope-chart.tsx