Line Chart

Name: Boreal UI
Author: Davin Chiupka

The LineChart component renders trends across labeled data points with optional grid and point markers.

Usage & Examples

Response Trend

Response trend

response-trend.tsx

const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart data={chartData} label="Response trend" />

Visual variants

Themes

primary

Response trend

secondary

Response trend

tertiary

Response trend

quaternary

Response trend

States

success

Response trend

warning

Response trend

error

Response trend

info

Response trend

visual-variants.tsx

// Themes
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart theme="primary" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart theme="secondary" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart theme="tertiary" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart theme="quaternary" data={chartData} label="Response trend" />

// States
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart state="success" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart state="warning" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart state="error" data={chartData} label="Response trend" />
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart state="info" data={chartData} label="Response trend" />

Interaction states

Response trend

interaction-states.tsx

// Loading
const chartData = [
    { label: "Jan", value: 24, color: "#2f80ed" },
    { label: "Feb", value: 38, color: "#27ae60" },
    { label: "Mar", value: 31, color: "#f2994a" },
    { label: "Apr", value: 47, color: "#9b51e0" },
  ];
  <LineChart loading data={chartData} label="Response trend" />

Props API

Line Chart props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`color`	`string`	No	props	`"currentColor"`	Stroke color for the line.
`data`	`ChartDatum[]`	Yes	props	`—`	Labelled values rendered as a line chart.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`height`	`number`	No	props	`200`	Height of the SVG viewport.
`label`	`ReactNode`	No	props	`—`	Visible chart label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`padding`	`number`	No	props	`24`	Inner SVG padding.
`showGrid`	`boolean`	No	props	`true`	Whether to render guide lines.
`showPoints`	`boolean`	No	props	`true`	Whether to render point markers.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.