A tiny line chart that shows the shape of a series in the space of a word. Use it in tables, cards and stats, next to the number it explains.
Pass the values in data. Give it an aria-label that says what it shows, or it stays hidden from screen readers.
With trend, the color follows the change from the first to the last value: success when it rises, error when it falls.
Use type for a theme color, or color for any CSS color. Turn the area off with area={false}.
A null breaks the line. Use connectNulls to draw through it.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the values to draw, a null leaves a gap | Array<number / null> | - | - |
| type | theme color of the line | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | primary |
| color | any CSS color, replaces type and trend | string | - | - |
| trend | color by the change from the first to the last value | boolean | - | false |
| area | fill the area under the line | boolean | - | true |
| strokeWidth | thickness of the line, in pixels | number | - | 2 |
| connectNulls | draw the line through null values | boolean | - | false |
| ... | native props, passed to the svg | SVGAttributes | 'aria-label', 'className', ... | - |
The ref points at the svg.
A sparkline has no text, so describe what it shows with aria-label or aria-labelledby, including the direction, such as "Weekly visits, rising". With a name it is an image. Without one it is hidden from assistive technology, which suits a chart that sits next to the same number in text.