LineChartConfig

Defined in: types/index.ts:414

Line / Area chart configuration.

Example

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

Extends

• BaseChartConfig

Properties

animate?

optional animate?: boolean

Defined in: types/index.ts:321

Run an entry animation on the first render and on data updates. Default true.

Inherited from

BaseChartConfig.animate

---

animDuration?

optional animDuration?: number

Defined in: types/index.ts:323

Animation duration in milliseconds. Default 600.

Inherited from

BaseChartConfig.animDuration

---

animEasing?

optional animEasing?: EasingName

Defined in: types/index.ts:325

Easing curve. Default 'easeOutCubic'.

Inherited from

BaseChartConfig.animEasing

---

area?

optional area?: boolean

Defined in: types/index.ts:416

Fill the area under the line with a soft gradient.

---

ariaDescription?

optional ariaDescription?: string

Defined in: types/index.ts:391

Longer accessible description. Rendered into a hidden element next to the canvas and linked via the standard aria-describedby attribute.

Inherited from

BaseChartConfig.ariaDescription

---

ariaLabel?

optional ariaLabel?: string

Defined in: types/index.ts:386

Accessible label for screen readers (rendered as canvas aria-label).

Inherited from

BaseChartConfig.ariaLabel

---

colorFn?

optional colorFn?: ColorFn

Defined in: types/index.ts:363

Per-datum colour callback, applied at draw time. Highest-precedence layer of the colour resolver chain — returning undefined falls through to Dataset.colors[i], then Dataset.color, then the theme palette.

Example

new BarChart('#chart', {
  colorFn: (v) => v < 0 ? '#ef4444' : v > 100 ? '#22c55e' : '#5b8cff',
});

Inherited from

BaseChartConfig.colorFn

---

dots?

optional dots?: boolean

Defined in: types/index.ts:420

Render a dot at each data point.

---

formatValue?

optional formatValue?: (value) => string

Defined in: types/index.ts:350

Format a numeric value for axis ticks, tooltips, and labels.

Parameters

value

number

Returns

string

Example

formatValue: (v) => v >= 1000 ? `${(v/1000).toFixed(1)}k` : `${v}`

Inherited from

BaseChartConfig.formatValue

---

legendPosition?

optional legendPosition?: LegendPosition

Defined in: types/index.ts:337

Where the legend appears relative to the plot. Default 'top'.

Inherited from

BaseChartConfig.legendPosition

---

lineWidth?

optional lineWidth?: number

Defined in: types/index.ts:422

Stroke width in pixels. Default 2.

---

onClick?

optional onClick?: (index, data, event) => void

Defined in: types/index.ts:380

Click handler. Receives the clicked datum’s index, the resolved data shape, and a ChartClickEvent with the original row, the resolved series, the numeric value, and the underlying DOM event — everything you need to wire a chart into a drill-down / user-journey flow.

The third argument is additive; existing two-argument handlers keep working unchanged.

Parameters

index

number

data

ResolvedData

event

ChartClickEvent

Returns

void

Example

onClick: (_i, _d, e) => analytics.track('chart_click', {
  label: e.label, value: e.value, series: e.series?.label,
});

Inherited from

BaseChartConfig.onClick

---

padding?

optional padding?: Partial<Padding>

Defined in: types/index.ts:329

Override the auto-computed plot area padding (pixels).

Inherited from

BaseChartConfig.padding

---

responsive?

optional responsive?: boolean

Defined in: types/index.ts:327

Auto-resize when the container size changes via ResizeObserver. Default true.

Inherited from

BaseChartConfig.responsive

---

showGrid?

optional showGrid?: boolean

Defined in: types/index.ts:331

Show grid lines on the plot area. Default true.

Inherited from

BaseChartConfig.showGrid

---

showLegend?

optional showLegend?: boolean

Defined in: types/index.ts:335

Render a legend listing each series. Default true.

Inherited from

BaseChartConfig.showLegend

---

showTooltip?

optional showTooltip?: boolean

Defined in: types/index.ts:333

Render an interactive tooltip on hover. Default true.

Inherited from

BaseChartConfig.showTooltip

---

smooth?

optional smooth?: boolean

Defined in: types/index.ts:418

Use cubic Bézier interpolation between points instead of straight segments.

---

step?

optional step?: boolean | "before" | "after" | "middle"

Defined in: types/index.ts:429

Render as a step line. Mutually exclusive with smooth.

• 'before' — value changes at the leading edge of each segment
• 'after' — value holds, then changes at the trailing edge (default)
• 'middle' — change occurs at the segment midpoint

---

subtitle?

optional subtitle?: string

Defined in: types/index.ts:341

Sub-heading rendered under the title.

Inherited from

BaseChartConfig.subtitle

---

theme?

optional theme?: Theme | ThemeName

Defined in: types/index.ts:319

Theme name ('midnight' etc.) or a complete Theme object.

Inherited from

BaseChartConfig.theme

---

title?

optional title?: string

Defined in: types/index.ts:339

Chart heading rendered above the plot.

Inherited from

BaseChartConfig.title

---

tooltipContainer?

optional tooltipContainer?: HTMLElement

Defined in: types/index.ts:403

Where to mount the floating tooltip element. Defaults to:

1. The canvas’s shadow root, if the chart is inside one (so the tooltip stays inside the same Shadow DOM encapsulation).
2. Otherwise, the chart’s container element — keeping the tooltip inside the chart’s stacking context (e.g. inside a modal, popover, or web component).

Pass an explicit HTMLElement to portal the tooltip elsewhere (e.g. directly to document.body for a Radix-style portal).

Inherited from

BaseChartConfig.tooltipContainer