BaseChartConfig

Defined in: types/index.ts:317

Options shared by every chart type.

Example

new BarChart('#chart', {
  theme: 'arctic',
  title: 'Quarterly revenue',
  subtitle: 'In thousands USD',
  formatValue: (v) => `$${v}k`,
  onClick: (i, data) => console.log('clicked', data.labels[i]),
  animDuration: 800,
  ariaLabel: 'Quarterly revenue bar chart',
});

Extended by

• LineChartConfig
• PieChartConfig
• GaugeConfig
• StackedBarChartConfig
• BubbleChartConfig
• HeatmapChartConfig
• CandlestickChartConfig
• BoxplotChartConfig
• FunnelChartConfig
• SankeyChartConfig
• ComboChartConfig
• RadialBarChartConfig
• BulletChartConfig
• MarimekkoChartConfig
• NetworkChartConfig

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.

---

animDuration?

optional animDuration?: number

Defined in: types/index.ts:323

Animation duration in milliseconds. Default 600.

---

animEasing?

optional animEasing?: EasingName

Defined in: types/index.ts:325

Easing curve. Default 'easeOutCubic'.

---

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.

---

ariaLabel?

optional ariaLabel?: string

Defined in: types/index.ts:386

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

---

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',
});

---

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}`

---

legendPosition?

optional legendPosition?: LegendPosition

Defined in: types/index.ts:337

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

---

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,
});

---

padding?

optional padding?: Partial<Padding>

Defined in: types/index.ts:329

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

---

responsive?

optional responsive?: boolean

Defined in: types/index.ts:327

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

---

showGrid?

optional showGrid?: boolean

Defined in: types/index.ts:331

Show grid lines on the plot area. Default true.

---

showLegend?

optional showLegend?: boolean

Defined in: types/index.ts:335

Render a legend listing each series. Default true.

---

showTooltip?

optional showTooltip?: boolean

Defined in: types/index.ts:333

Render an interactive tooltip on hover. Default true.

---

subtitle?

optional subtitle?: string

Defined in: types/index.ts:341

Sub-heading rendered under the title.

---

theme?

optional theme?: Theme | ThemeName

Defined in: types/index.ts:319

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

---

title?

optional title?: string

Defined in: types/index.ts:339

Chart heading rendered above the plot.

---

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).