Line chart

Vanilla JS

import { LineChart } from '@arshad-shah/swift-chart';

const chart = new LineChart('#chart', { theme: 'midnight' });
chart.setData(monthlySales, { x: 'month', y: ['revenue', 'target'] });

React

import { Line } from '@arshad-shah/swift-chart/react';

<Line
  data={monthlySales}
  mapping={{ x: 'month', y: ['revenue', 'target'] }}
  theme="midnight"
  height={320}
/>

Common options

smooth

Use cubic interpolation for a curved line.

dots

Render a dot at each data point.

lineWidth

Thicken the line stroke.

step

Render as a step line. Useful for state-change or staircase data. Accepts 'before' | 'after' | 'middle' (or true for the default 'after'); steps are mutually exclusive with smooth.

Reference

• Class: LineChart
• React component: Line
• Config: see LineChartConfig in the Core API.