Line Graph

Line graphs are used to visualise continuous datasets, showing patterns, trends, and changes over time.

Props

NameDescriptionTypeRequiredDefault
childrenCustom SVG element rendered inside the graphReactNodeNo-
curveSets the curve type used to render the line path between data points'linear' | 'natural' | 'monotoneX' | 'stepBefore' | 'stepAfter'No'linear'
jointsDisplays a point at every data coordinate along the linebooleanNofalse
loadingDisplays a loading skeletonbooleanNofalse
datasetKey matching a property in the datasets prop in <Graph />stringNo-

Styling

Custom styling can be applied by targeting the class names below. Each class corresponds to a specific element for precise theming and overrides.

Class NameElement
lines__strokeThe line path
lines__fillFilled area beneath the line
lines__jointsPoint markers along the line