LineChart

Canvas 2D line chart with optional area fill, dots, and Bezier smoothing.

Use area: true for an area chart, or import the <Area> React component. Pass any object array to setData(data, mapping); the mapping picks which fields are X (labels) and Y (one or more series).

Example

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

const chart = new LineChart('#chart', {
  theme: 'midnight',
  smooth: true,
  dots: true,
});

chart.setData(
  [
    { month: 'Jan', revenue: 420, target: 400 },
    { month: 'Feb', revenue: 510, target: 450 },
  ],
  { x: 'month', y: ['revenue', 'target'] },
);

See

LineChartConfig for the full option list.

Extends

BaseChart

Constructors

Constructor

new LineChart(container, config?): LineChart

Defined in: charts/line.ts:57

Parameters

container

string | HTMLElement

config?

LineChartConfig = {}

Returns

LineChart

Overrides

BaseChart.constructor

Properties

animator

animator: Animator

Defined in: core/base.ts:63

Inherited from

BaseChart.animator

animProgress

animProgress: number = 1

Defined in: core/base.ts:74

Inherited from

BaseChart.animProgress

canvas

canvas: HTMLCanvasElement

Defined in: core/base.ts:60

Inherited from

BaseChart.canvas

config

config: LineChartConfig & Required<Pick<BaseChartConfig, "title" | "animate" | "animDuration" | "animEasing" | "responsive" | "showGrid" | "showTooltip" | "showLegend" | "legendPosition" | "subtitle">> & BaseChartConfig

Defined in: charts/line.ts:37

Overrides

BaseChart.config

container

container: HTMLElement

Defined in: core/base.ts:51

Host element the canvas was mounted into.

Inherited from

BaseChart.container

ctx

ctx: CanvasRenderingContext2D

Defined in: core/base.ts:61

Inherited from

BaseChart.ctx

downsampleTarget

downsampleTarget: number = 0

Defined in: charts/line.ts:55

Downsample threshold — auto if 0

height

height: number = 0

Defined in: core/base.ts:89

Inherited from

BaseChart.height

hoverIndex

hoverIndex: number = -1

Defined in: core/base.ts:65

Inherited from

BaseChart.hoverIndex

hoverSeriesIndex

hoverSeriesIndex: number = -1

Defined in: core/base.ts:73

Index of the series under the cursor, or -1 when the hover is not series-specific (e.g. a column hit on a multi-series line chart). Charts that can pinpoint a series — bubble, scatter, network, sankey, marimekko, treemap — set this in their _onMouse. Single-series charts report 0 automatically via _buildClickEvent.

Inherited from

BaseChart.hoverSeriesIndex

padding

padding: Padding

Defined in: core/base.ts:90

Inherited from

BaseChart.padding

resolved

resolved: ResolvedData

Defined in: core/base.ts:75

Inherited from

BaseChart.resolved

theme

theme: Theme

Defined in: core/base.ts:62

Inherited from

BaseChart.theme

tooltip: Tooltip | null

Defined in: core/base.ts:64

Inherited from

BaseChart.tooltip

width

width: number = 0

Defined in: core/base.ts:88

Inherited from

BaseChart.width

Accessors

plotArea

Get Signature

get plotArea(): PlotArea

Defined in: core/base.ts:328

Returns

PlotArea

Inherited from

BaseChart.plotArea

Methods

_draw()

_draw(): void

Defined in: charts/line.ts:78

Returns

void

Overrides

BaseChart._draw

_onMouse()

_onMouse(e): void

Defined in: charts/line.ts:61

Parameters

e

MouseEvent

Returns

void

Overrides

BaseChart._onMouse

destroy()

destroy(): void

Defined in: core/base.ts:461

Returns

void

Inherited from

BaseChart.destroy

resize()

resize(): void

Defined in: core/base.ts:432

Returns

void

Inherited from

BaseChart.resize

setData()

setData(data, mapping?): void

Defined in: core/base.ts:350

Parameters

data

Record<string, any>[] | null | undefined

mapping?

DataMapping

Returns

void

Inherited from

BaseChart.setData

setTheme()

setTheme(theme): void

Defined in: core/base.ts:389

Switch theme. Accepts a registered theme name ('midnight', 'arctic', 'ember', 'forest', or any name passed to addTheme) or a full Theme object — same surface that the constructor accepts via config.theme.

Parameters

theme

Theme | ThemeName

Returns

void

Inherited from

BaseChart.setTheme

toDataURL()

toDataURL(type?, quality?, options?): string

Defined in: core/base.ts:446

Export the current chart as a data URL.

canvas.toDataURL() always returns the backing-store bitmap, which is DPR-multiplied — a 400×300 chart on a DPR=2 display exports as 800×600. Pass { scale: 'css' } to downscale the export to on-screen CSS dimensions (typical for “Save as PNG” buttons); the default 'native' keeps the full backing-store resolution.

Parameters

type?

string = 'image/png'

quality?

number = 0.92

options?

scale?

"native" | "css"

Returns

string

Inherited from

BaseChart.toDataURL

update()

update(arg, mapping?): void

Defined in: core/base.ts:401

Polymorphic update:

update(dataArray, mapping?) — replaces data (alias of setData).
update(configPatch) — patches non-data config (theme, title, padding, etc.).

Parameters

arg

Record<string, any>[] | Partial<BaseChartConfig>

mapping?

DataMapping

Returns

void

Inherited from

BaseChart.update