BaseChartConfig

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

Properties

animate?

optional animate?: boolean

Defined in: types/index.ts:192

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

animDuration?

optional animDuration?: number

Defined in: types/index.ts:194

Animation duration in milliseconds. Default 600.

animEasing?

optional animEasing?: EasingName

Defined in: types/index.ts:196

Easing curve. Default 'easeOutCubic'.

ariaDescription?

optional ariaDescription?: string

Defined in: types/index.ts:230

Longer accessible description (rendered as canvas aria-description).

ariaLabel?

optional ariaLabel?: string

Defined in: types/index.ts:228

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

formatValue?

optional formatValue?: (value) => string

Defined in: types/index.ts:221

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:208

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

onClick?

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

Defined in: types/index.ts:226

Click handler invoked with the index of the clicked data point and the resolved data shape so consumers can read the underlying row.

Parameters

index

number

data

ResolvedData

Returns

void

padding?

optional padding?: Partial<Padding>

Defined in: types/index.ts:200

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

responsive?

optional responsive?: boolean

Defined in: types/index.ts:198

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

showGrid?

optional showGrid?: boolean

Defined in: types/index.ts:202

Show grid lines on the plot area. Default true.

showLegend?

optional showLegend?: boolean

Defined in: types/index.ts:206

Render a legend listing each series. Default true.

showTooltip?

optional showTooltip?: boolean

Defined in: types/index.ts:204

Render an interactive tooltip on hover. Default true.

subtitle?

optional subtitle?: string

Defined in: types/index.ts:212

Sub-heading rendered under the title.

theme?

optional theme?: Theme | ThemeName

Defined in: types/index.ts:190

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

title?

optional title?: string

Defined in: types/index.ts:210

Chart heading rendered above the plot.