Area chart

Area is a line chart with area: true. Use the dedicated Area component in React, or pass area: true to LineChart directly.

Vanilla JS

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

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

React

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

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

Common options

Multi-series

Smooth area

Reference

• Class: LineChart (with area: true)
• React component: Area