SlopeGraph
One line per series connecting two points in time, showing which series rose, fell, or crossed between a before and an after.
Component behavior
SlopeGraph compares two values per series with connected endpoints. Column labels identify the two periods. The chart does not display intermediate values.
Use cases
- Series compared across exactly two time points.
- Changes in value or rank between endpoints.
- Two-point comparisons with direct series labels.
Alternatives
LineChart: three or more time points must be traced.
BarChart: absolute magnitudes are the main comparison.
SankeyDiagram: flows split or merge between endpoints.
Props
Each SlopeSeries has a label and its start and end values. Both endpoints share one scale, so the slope angle is a true encoding of the change. Colors fall back to the shared palette; the column headers are set by startLabel and endLabel.
| Prop | Type | Default | Description |
|---|---|---|---|
series | SlopeSeries[] | — | One line per series: label, start value, end value, and an optional color. Labels are used as React keys. |
startLabel | ReactNode | — | Column header over the left (start) time point. |
endLabel | ReactNode | — | Column header over the right (end) time point. |
width | number | 360 | Layout width in pixels; the chart scales to its container. |
height | number | 300 | Layout height in pixels. |
min | number | — | Pin the bottom of the shared value domain. Defaults to the data extent, padded. |
max | number | — | Pin the top of the shared value domain. Defaults to the data extent, padded. |
formatValue | (value: number) => string | — | Formats the endpoint values printed beside each series. |
Examples
NPS by plan
import { SlopeGraph } from "@solarius/onset";
import type { SlopeSeries } from "@solarius/onset";