General options
Shared chart API
Section titled “Shared chart API”Every chart factory (BarChart, LineChart) takes a single argument holding
the container element, and returns a chart instance:
const chart = BarChart({ el: document.getElementById("chart") });Data and options are passed separately, with the set() method:
chart.set({ data, options });| Argument | Type | Notes |
|---|---|---|
el |
HTMLElement |
Must be empty. Passing a non-empty element throws. |
data |
Array<Record<string, string | number | null>> |
See Preparing data. |
options |
BarChartOptions or LineChartOptions |
Chart-specific. Documented on each chart type’s page. |
See Basic usage for the full lifecycle, including updating and cleaning up a chart.
Options
Section titled “Options”These options are shared by all chart types.
Type: number
Default: none
Width of the chart. Ignored when responsive is true.
height
Section titled “height”Type: number
Default: none
Height of the chart. Ignored when both width and aspectRatio are set.
aspectRatio
Section titled “aspectRatio”Type: number
Default: none
Aspect ratio of the chart, used when either width or height is not set. When
combined with responsive, this value is used to calculate the height of the
chart.
responsive
Section titled “responsive”Type: boolean
Default: true
Whether the chart should track the width of its container element. If true,
the chart takes up the full width of the container element and the width
option is ignored.
groupByKey
Section titled “groupByKey”Type: string
Default: none
Key of the data that should be used to group the data.
Type: ColorOptions
Default: none
Color options for grouped charts.
color.scheme
Section titled “color.scheme”Type: keyof colorSchemes
Default: none
Predefined color scheme. See Color options for the available schemes and the order of their colors.
color.type
Section titled “color.type”Type: "categorical" | "ordinal" | "diverging" | "sequential"
Default: none
Has no effect. This option is not read anywhere in the library.
color.range
Section titled “color.range”Type: string[]
Default: none
Custom range of colors. Has to be a list of color strings.
color.domain
Section titled “color.domain”Type: string[]
Default: none
Domain that the colors are mapped to.
legend
Section titled “legend”Type: { isInteractive?: boolean; isHidden?: boolean }
Default:
none
Legend behavior and visibility.
legend.isInteractive
Section titled “legend.isInteractive”Type: boolean
Default: true
Whether the legend should contain buttons to filter the chart.
legend.isHidden
Section titled “legend.isHidden”Type: boolean
Default: false
Whether the legend should be hidden.
tooltip
Section titled “tooltip”Type: { isEnabled?: boolean; undefinedLabel?: string }
Default:
none
Tooltip behavior and fallback labeling.
tooltip.isEnabled
Section titled “tooltip.isEnabled”Type: boolean
Default: false
Whether the tooltip should be enabled.
tooltip.undefinedLabel
Section titled “tooltip.undefinedLabel”Type: string
Default: "Keine Daten"
Label to display in the tooltip when the value is undefined, null, or NaN.
Axis options are documented on the Axis options page. See
also Chart instance for the chart factory
arguments (el, data) that sit alongside options.