Component
LineChart
Lines over shared categories — trends over time. `area` fills under them.
import { LineChart } from '@loidolt/theme-charts';
Example
Line chart of 3 series over 12 categories, Jan to Dec. Birch ply rises, from a low of 42 in Jan to a high of 92 in Nov; Cork rises, from a low of 18 in Jan to a high of 41 in Nov; Acrylic rises, from a low of 10 in Feb to a high of 26 in Dec.
| Category | Birch ply | Cork | Acrylic |
|---|---|---|---|
| Jan | 42 | 18 | 12 |
| Feb | 48 | 22 | 10 |
| Mar | 51 | 20 | 14 |
| Apr | 63 | 25 | 13 |
| May | 58 | 31 | 17 |
| Jun | 66 | 29 | 16 |
| Jul | 71 | 27 | 19 |
| Aug | 69 | 33 | 18 |
| Sep | 74 | 30 | 22 |
| Oct | 80 | 36 | 21 |
| Nov | 92 | 41 | 24 |
| Dec | 88 | 39 | 26 |
Line chart of 3 series over 12 categories, Jan to Dec. Birch ply rises, from a low of 42 in Jan to a high of 92 in Nov; Cork rises, from a low of 18 in Jan to a high of 41 in Nov; Acrylic rises, from a low of 10 in Feb to a high of 26 in Dec.
| Month | Birch ply | Cork | Acrylic |
|---|---|---|---|
| Jan | 42 | 18 | 12 |
| Feb | 48 | 22 | 10 |
| Mar | 51 | 20 | 14 |
| Apr | 63 | 25 | 13 |
| May | 58 | 31 | 17 |
| Jun | 66 | 29 | 16 |
| Jul | 71 | 27 | 19 |
| Aug | 69 | 33 | 18 |
| Sep | 74 | 30 | 22 |
| Oct | 80 | 36 | 21 |
| Nov | 92 | 41 | 24 |
| Dec | 88 | 39 | 26 |
Notes
- Its description reads each series’ trend and extremes ("Birch ply rises, from a low of 42 in Jan to a high of 92 in Nov").
- Points show for 12 or fewer categories.
nullvalues leave a gap rather than drawing through zero.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | CategoryData | — | Categories along the x axis and a series of values for each. |
categoryLabel | string | 'Category' | Heading of the first column in the data table. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andLineOptions, forwarded to the root element.