Line graphs are used to visualise continuous datasets, showing patterns, trends, and changes over time.
Name | Description | Type | Required | Default |
children | Custom SVG element rendered inside the graph | ReactNode | No | - |
curve | Sets the curve type used to render the line path between data points | 'linear' | 'natural' | 'monotoneX' | 'stepBefore' | 'stepAfter' | No | 'linear' |
joints | Displays a point at every data coordinate along the line | boolean | No | false |
loading | Displays a loading skeleton | boolean | No | false |
dataset | Key matching a property in the datasets prop in <Graph /> | string | No | - |
Custom styling can be applied by targeting the class names below. Each class corresponds to a specific element for precise theming and overrides.
Class Name | Element |
lines__stroke | The line path |
lines__fill | Filled area beneath the line |
lines__joints | Point markers along the line |