Line Chart
Plot one or more data series over a shared axis.
Preview
Import
import { LineChart } from "@sigil-ui/components";Usage
<LineChart
series={[
{
label: "Users",
points: [
{ label: "Mon", value: 120 },
{ label: "Tue", value: 180 },
{ label: "Wed", value: 150 },
{ label: "Thu", value: 220 },
{ label: "Fri", value: 310 },
{ label: "Sat", value: 280 },
{ label: "Sun", value: 190 },
],
},
{
label: "Sessions",
points: [
{ label: "Mon", value: 200 },
{ label: "Tue", value: 240 },
{ label: "Wed", value: 180 },
{ label: "Thu", value: 290 },
{ label: "Fri", value: 350 },
{ label: "Sat", value: 300 },
{ label: "Sun", value: 250 },
],
color: "var(--s-success, #22c55e)",
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | LineChartSeries[] | — | — |
width | number | — | — |
height | number | — | — |
showDots | boolean | true | Show dots at each data point. |
showGrid | boolean | true | Show grid lines. |
showXLabels | boolean | true | Show x-axis labels. |
showYLabels | boolean | true | Show y-axis labels. |
filled | boolean | false | Fill area under line. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-border | Border |
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-surface | Surface |