Combo Chart

ChartsSince 0.4.0

import { ComboChart } from '@absoluteui/components/combo-chart';
import '@absoluteui/components/combo-chart/style.css';

Using Angular? See Combo Chart for Angular.

What it does

An accessible SVG chart that combines bars, lines, and areas over shared categories. It provides:

• per-series type (bar, line, area) and value axis (primary at the start side, secondary at the end side, each with its own number format);
• grouped or stacked bars inside each category band; lines and areas through the band centers, with gaps for missing values;
• a legend of toggle buttons that show and hide series;
• keyboard-reachable marks (one tab stop) with a tooltip on focus, and a category tooltip listing every series on hover;
• an optional vertical crosshair and optional zoom and pan over categories;
• a generated accessible summary and a data table fallback with the exact values;
• series that differ by texture (bars), dash pattern and marker shape (lines), never by color alone (WCAG 1.4.1).

When to use

• Two related measures on different scales (for example revenue as bars and margin as a line on a secondary axis).
• Actuals as bars with a target or average as a line.
• A few series (up to about 8) over the same categories.

When not to use

• One kind of mark only: use Bar Chart or Line Chart.
• Numeric or time x values: use Line Chart or Scatter Chart.
• Part-to-whole: use Pie Chart or a stacked Bar Chart.

Examples

Revenue bars with a margin line on a secondary percent axis

import { ComboChart, type ComboChartSeries } from '@absoluteui/components/combo-chart';

const series: ComboChartSeries[] = [
  { id: 'rev', label: 'Revenue', type: 'bar', values: [120, 150, 170, 160] },
  { id: 'margin', label: 'Margin', type: 'line', axis: 'secondary', values: [0.32, 0.4, 0.38, 0.41] },
];
const host = document.createElement('div');
document.body.append(host);
ComboChart.create(host, {
  label: 'Revenue and margin',
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series,
  primaryAxis: { label: 'Revenue (k)' },
  secondaryAxis: { label: 'Margin', format: { style: 'percent' } },
  crosshair: true,
});

Stacked bars with a target line, zoomed to the first quarter

import { ComboChart, type ComboChartSeries, type ComboChartZoomDetail } from '@absoluteui/components/combo-chart';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const series: ComboChartSeries[] = [
  { id: 'web', label: 'Web', type: 'bar', values: months.map((_, i) => 40 + i * 3) },
  { id: 'store', label: 'Store', type: 'bar', values: months.map((_, i) => 30 + (i % 4) * 5) },
  { id: 'target', label: 'Target', type: 'line', values: months.map(() => 90) },
];
const host = document.querySelector<HTMLElement>('#sales');
if (host) {
  const chart = ComboChart.create(host, { label: 'Sales by channel', categories: months, series, stacked: true, zoom: true, zoomRange: { from: 0, to: 2 } });
  host.addEventListener('aui-zoom', (event) => {
    const { x } = (event as CustomEvent<ComboChartZoomDetail>).detail;
    host.dataset.window = x ? `${months[Math.round(x.from)] ?? ''}-${months[Math.round(x.to)] ?? ''}` : 'all';
  });
  chart.update({ zoomRange: null });
}

Usage

import { ComboChart } from '@absoluteui/components/combo-chart';
import '@absoluteui/components/combo-chart/style.css';

const host = document.querySelector<HTMLElement>('#sales');
if (host) {
  ComboChart.create(host, {
    label: 'Sales and target',
    categories: ['Jan', 'Feb', 'Mar', 'Apr'],
    series: [
      { id: 'sales', label: 'Sales', type: 'bar', values: [80, 95, null, 110] },
      { id: 'target', label: 'Target', type: 'line', values: [90, 90, 100, 100] },
    ],
    zoom: true,
  });
}

More usage

import { ComboChart, type ComboChartSeries } from '@absoluteui/components/combo-chart';

const series: ComboChartSeries[] = [
  { id: 'rev', label: 'Revenue', type: 'bar', values: [120, 150, 170] },
  { id: 'margin', label: 'Margin', type: 'line', axis: 'secondary', values: [0.32, 0.4, 0.38] },
];
const host = document.createElement('div');
document.body.append(host);
ComboChart.create(host, { label: 'Revenue and margin', categories: ['Q1', 'Q2', 'Q3'], series, secondaryAxis: { label: 'Margin', format: { style: 'percent' } } });

Export: @absoluteui/components/chart-export (chartToSvg, chartToPng, downloadChart) exports any chart instance to SVG or PNG.

Anatomy

<div class="aui-chart aui-combo-chart [aui-chart--patterns] [aui-chart--zoomable] [aui-chart--zoomed]">
  <div class="aui-chart__header">
    <div class="aui-chart__title" id="T">title</div>
    <p class="aui-chart__description" id="D">description</p>
    <div class="aui-chart__toolbar">                                (zoom: true; hidden otherwise)
      <div class="aui-chart__zoom" role="group" aria-label="Zoom"><button class="aui-chart__tool" aria-label="Zoom in"/>...</div>
    </div>
  </div>
  <ul class="aui-chart__legend" aria-label="Legend">
    <li class="aui-chart__legend-entry"><button class="aui-chart__legend-item" aria-pressed="true"><svg class="aui-chart__swatch" aria-hidden="true"/>Revenue</button></li>
  </ul>
  <div class="aui-chart__body">                                   (height: --aui-chart-height)
    <svg class="aui-chart__svg" role="group" aria-roledescription="combo chart" aria-labelledby="T" aria-describedby="D S">
      <g class="aui-chart__crosshair" aria-hidden="true">...</g>   (crosshair: true)
      <g class="aui-chart__grid" aria-hidden="true"/> <g class="aui-chart__axis …" aria-hidden="true"/> <g class="aui-chart__axis aui-chart__axis--value aui-chart__axis--secondary" aria-hidden="true"/>
      <g class="aui-combo-chart__bars"><g class="aui-combo-chart__series aui-chart__series--c1"><rect class="aui-chart__mark aui-chart__bar" role="img" aria-label="Q1, Revenue: 120" tabindex="0"/><rect class="aui-chart__pattern" aria-hidden="true"/>...</g></g>
      <g class="aui-combo-chart__lines"><g class="aui-combo-chart__series aui-chart__series--c2" aria-hidden="true"><path class="aui-chart__area"/><path class="aui-chart__line aui-chart__dash--2"/></g></g>
      <g class="aui-combo-chart__points"><g class="aui-combo-chart__series aui-chart__series--c2"><path class="aui-chart__mark aui-chart__point" role="img" aria-label="Q1, Margin: 32%"/>...</g></g>
    </svg>
    <div class="aui-chart__empty" hidden/>  <div class="aui-chart__tooltip" aria-hidden="true" hidden/>
  </div>
  <p class="aui-chart__summary" id="S" hidden>generated summary</p>
  <div class="aui-chart__data"><button class="aui-chart__table-toggle" aria-expanded="false" aria-controls="R">Show data table</button><div class="aui-chart__table-scroll" id="R" role="region"><table class="aui-chart__table">...</table></div></div>
</div>

API reference

Factory

ComboChart.create(host: HTMLElement, options: ComboChartOptions): ComboChart

Global configuration key: comboChart (see Configuration).

Options

Option	Type	Default	Description
label	string		Chart title: visible text and the accessible name of the plot (aria-labelledby). Required.
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (aria-describedby).
valueFormat	Intl.NumberFormatOptions		Number format for values in tooltips, labels, the data table, the summary, and axis ticks (ticks use fixed fraction digits).
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere except axis ticks.
hiddenSeries	readonly string[]		Ids of series hidden initially; update() replaces the hidden set.
categories	readonly string[]		Shared categories (x axis), in order. Required.
series	readonly ComboChartSeries[]		Series: { id, label, values: (number | null)[], type: ‘bar’ | ‘line’ | ‘area’, axis?: ‘primary’ | ‘secondary’, color?: 1-8 }. values has exactly one entry per category; null, NaN, and infinities are gaps. Required.
stacked	boolean	false	Stack the bar series per axis (positive and negative values stack separately); lines and areas are never stacked.
categoryAxis	{ label?: string }		Category axis title (also the first table column header; default “Category”).
primaryAxis	{ label?: string; min?: number; max?: number; tickCount?: number; includeZero?: boolean; format?: Intl.NumberFormatOptions }		Primary (start-side) value axis: title, fixed domain, tick count (2-20), zero inclusion, and a number format for its values (default: valueFormat). Bars and areas always include zero.
secondaryAxis	{ label?: string; min?: number; max?: number; tickCount?: number; includeZero?: boolean; format?: Intl.NumberFormatOptions }		Secondary (end-side) value axis, shown when a visible series uses it. Tick labels only (no gridlines); its tick count follows the primary axis unless set. format defaults to valueFormat; formatValue overrides both axes.
zoom	boolean	false	Zoom and pan over categories: a Zoom toolbar (Zoom in, Zoom out, Reset zoom), +/= and - and 0 keys on a focused mark, arrow keys past the window edge pan, Ctrl/Cmd + wheel, drag to pan a zoomed chart, Shift + drag to select a range. Turning it off resets the window.
zoomRange	ChartZoomRange | null		Visible category index window { from, to }; null shows everything. Clamped to the data and to at least two categories. Applied without an aui-zoom event; use with zoom: true.
legend	'auto' | 'show' | 'hide'	"auto"	Legend of toggle buttons; auto and show both display it (also for a single series), hide removes it. Globally configurable.
dataTable	'toggle' | 'visible' | 'hidden' | 'none'	"toggle"	Data table fallback with the exact data: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none. Globally configurable.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus. Globally configurable.
patterns	boolean	false	Texture fills (and dash patterns for lines) so marks never differ by color alone (always on in forced colors). Globally configurable.
height	number	300	Plot height in CSS px (integer 120-2000); the width follows the container. Globally configurable.
crosshair	boolean	false	Vertical crosshair line (aria-hidden) on the hovered or focused category. Globally configurable.
locale	string	"en-US"	Number and message locale. Globally configurable. Inherited from common configuration.
direction	'ltr' | 'rtl'	"ltr"	rtl mirrors the category axis, swaps the primary (right) and secondary (left) axis sides, and swaps ArrowLeft/ArrowRight. Globally configurable. Inherited from common configuration.

Properties

Property	Type	Description
host	HTMLElement	The host element.
element	SVGSVGElement	The plot (svg role=“group”), named by the title and described by the summary.
summary	string	The generated (or custom) accessible summary.
hiddenSeries	string[]	Ids of hidden series, in data order.
zoomRange	ChartZoomRange | null	Current visible category index window, or null.

Methods

Method	Description
update(options: Partial<ComboChartOptions>): void	Merge, validate, and re-render. Invalid options throw and keep the previous state. Keyboard focus stays on the same mark when it still exists.
setSeriesVisible(id: string, visible: boolean): void	Show or hide a series programmatically; emits no event.
destroy(): void	Remove rendering, host classes, listeners, the resize observer, and the configuration subscription.

Events

Event	Detail	Bubbles	Cancelable	Description
aui-series-toggle	{ id: string; visible: boolean; hidden: string[] }	Yes	No	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible().
aui-zoom	ComboChartZoomDetail = ChartZoomDetail: { x: ChartZoomRange | null; y: null; reason: 'button' | 'keyboard' | 'wheel' | 'pan' | 'select' | 'reset' }	Yes	No	The user changed the visible window (toolbar, keys, Ctrl/Cmd + wheel, drag pan, Shift + drag selection). x is a category index range, or null when showing everything. Not emitted for the zoom range options or when the window does not change.

CSS classes

All rules live in the aui.components cascade layer, so application styles override them without specificity battles.

Class	Purpose
aui-chart	Host (shared chart chrome).
aui-combo-chart	Host modifier for this chart type.
aui-chart--patterns	patterns option on: textures (and dash patterns) shown.
aui-chart__header / __title / __title--hidden / __description	Title and description.
aui-chart__legend / __legend-entry / __legend-item / __legend-item--hidden / __legend-label	Legend list and its entries.
aui-chart__swatch	aria-hidden legend and tooltip key (marker, dash, texture).
aui-chart__body / __svg / __layer	Plot container (height from –aui-chart-height), SVG, and drawing layer.
aui-chart__grid / __gridline / __zero-line / __axis / __axis-line / __tick-label / __axis-title	Axes (aria-hidden).
aui-chart__series--c1 ... --c8	Palette slot classes; set –aui-chart-color from color-chart-<n>.
aui-chart__mark / __mark--active / __mark--hover	Focusable data mark and its states.
aui-chart__tooltip / __tooltip-title / __tooltip-rows / __tooltip-row / __tooltip-label / __tooltip-value	Tooltip (aria-hidden; the focused mark carries the same text).
aui-chart__empty	Empty state text (No data, All series are hidden).
aui-chart__summary	Hidden summary referenced by aria-describedby.
aui-chart__data / __data--hidden / __table-toggle / __table-scroll / __table / __cell--numeric	Data table fallback.
aui-chart--zoomable / aui-chart--zoomed	Host modifiers: zoom enabled (touch-action pan-y on the body); a window is applied (grab cursor).
aui-chart__toolbar / __zoom / __tool	Header toolbar (hidden while empty), the Zoom button group, and its icon buttons (aria-disabled when unavailable).
aui-chart__crosshair / __crosshair-line	aria-hidden crosshair lines drawn under the marks (crosshair option).
aui-chart__brush	Range-selection rectangle while Shift + dragging.
aui-chart__pattern / aui-chart__pattern-tile	Texture overlays (aria-hidden).
aui-chart__dash--1 ... --4	Dash patterns of line and area series.
aui-chart__bar / __line / __area / __point / __connector / __value-label	Shared mark styles (chart-marks): bars, lines, areas, point markers, dashed connectors, printed values.
aui-chart__axis--value / aui-chart__axis--secondary	Secondary value axis tick labels (aria-hidden).
aui-combo-chart__bars / __lines / __points / __series	Bar, line/area, and point layers and per-series groups.

Design tokens

Tokens this stylesheet reads (verified in CI). Override them in a theme or with the Theme Designer.

--aui-border-width | --aui-color-border | --aui-color-border-strong | --aui-color-chart-1 | --aui-color-chart-2 | --aui-color-chart-3 | --aui-color-chart-4 | --aui-color-chart-5 | --aui-color-chart-6 | --aui-color-chart-7 | --aui-color-chart-8 | --aui-color-chart-axis | --aui-color-chart-grid | --aui-color-focus-ring | --aui-color-hover | --aui-color-link | --aui-color-surface | --aui-color-surface-sunken | --aui-color-text | --aui-color-text-muted | --aui-duration-fast | --aui-easing-standard | --aui-focus-ring-offset | --aui-focus-ring-width | --aui-font-family-sans | --aui-font-size-md | --aui-font-size-sm | --aui-font-size-xs | --aui-font-weight-medium | --aui-font-weight-regular | --aui-font-weight-semibold | --aui-line-height-normal | --aui-line-height-tight | --aui-radius-md | --aui-radius-sm | --aui-shadow-md | --aui-space-1 | --aui-space-2 | --aui-space-3 | --aui-tooltip-max-width | --aui-touch-target-min

TypeScript definitions

type ComboChartSeriesType = 'bar' | 'line' | 'area';
type ComboChartAxisSide = 'primary' | 'secondary';
interface ComboChartSeries extends ChartSeries { type: ComboChartSeriesType; axis?: ComboChartAxisSide }
interface ComboChartValueAxis { readonly label?: string; readonly min?: number; readonly max?: number; readonly tickCount?: number; readonly includeZero?: boolean; format?: Intl.NumberFormatOptions }
interface ComboChartConfig { legend: ChartLegendMode; dataTable: ChartTableMode; tooltip: boolean; patterns: boolean; height: number; crosshair: boolean }
interface ComboChartOptions extends ChartCommonOptions, Partial<ComboChartConfig> {
  categories: readonly string[];
  series: readonly ComboChartSeries[];
  stacked?: boolean;
  categoryAxis?: { label?: string };
  primaryAxis?: ComboChartValueAxis;
  secondaryAxis?: ComboChartValueAxis;
  zoom?: boolean;
  zoomRange?: ChartZoomRange | null;
}
type ComboChartSeriesToggleDetail = { id: string; visible: boolean; hidden: string[] };
type ComboChartZoomDetail = { x: ChartZoomRange | null; y: ChartZoomRange | null; reason: 'button' | 'keyboard' | 'wheel' | 'pan' | 'select' | 'reset' };

Accessibility

Pattern: SVG chart as a named, described group (role=“group” with aria-roledescription) of role=“img” data marks with roving focus; data table fallback (native table). Follows the WAI Complex Images tutorial (short name plus long description) and the roving tabindex technique of WAI-ARIA APG.

Keyboard

Key	Context	Action
ArrowLeft / ArrowRight	Mark focused	Previous / next category of the same series (gaps skipped); mirrored in RTL. Zoomed: past the window edge the window pans to the next value.
ArrowUp / ArrowDown	Mark focused, more than one visible series	Same (or nearest) category in the previous / next visible series, in series order.
Home / End	Mark focused	First / last mark of the series.
PageUp / PageDown	Mark focused	Ten marks back / forward.
Escape	Tooltip visible	Hides the tooltip without moving focus (WCAG 1.4.13); it returns on the next move.
Tab / Shift+Tab	Any	Zoom buttons (zoom: true), legend buttons, then one tab stop for the plot (the active mark), then the Show data table button and table region.
Enter / Space	Legend button	Shows or hides the series (native button).
+ / =	Mark focused, zoom enabled	Zoom in around the focused mark.
-	Mark focused, zoom enabled	Zoom out around the focused mark.
0	Mark focused, zoom enabled	Reset zoom (show all data).
Enter / Space	Zoom button	Zoom in, zoom out, or reset (native button; ignored while aria-disabled).

Roles

Element	Role
svg.aui-chart__svg	group with aria-roledescription (localized chart type), named by the title
data marks	img with an aria-label: category, series, formatted value (bars and line/area points)
legend	list (ul) named “Legend”; entries are toggle buttons (aria-pressed)
zoom toolbar (zoom enabled)	group named “Zoom” of native buttons “Zoom in”, “Zoom out”, “Reset zoom”
axes, lines, areas, textures, tooltip, crosshair, selection brush	aria-hidden (decorative duplicates of the accessible data)
data table	table (native) with caption, column headers, and row headers; wide tables scroll in a focusable region

ARIA attributes

Attribute	Element	Value
aria-labelledby	svg	id of the visible (or visually hidden) title
aria-describedby	svg	description id (when provided) and the generated summary id
aria-roledescription	svg	Localized “combo chart”
aria-label	each mark	Localized “{x}, {series}: {value}”, formatted with the series’ axis format. Example: “Q2, Margin: 40%”
tabindex	active mark	0 on exactly one mark (roving); other marks have none
aria-pressed	legend button	true while the series is visible
aria-expanded / aria-controls	Show data table button	Table open state and the table region id
aria-disabled	zoom buttons	true while the action is unavailable (Zoom in at the minimum span, Zoom out and Reset zoom when not zoomed); the button stays focusable

Focus

Roving focus: one mark is in the tab sequence and remembers the last visited mark across re-renders (resize, update, zoom). Toggling a legend entry keeps focus on its button; toggling the table keeps focus on the table button.

WCAG 2.2 success criteria addressed

Criterion	Level	Note
1.1.1 Non-text Content	A
1.3.1 Info and Relationships	A
1.4.1 Use of Color	A
1.4.3 Contrast (Minimum)	AA
1.4.10 Reflow	AA
1.4.11 Non-text Contrast	AA
1.4.13 Content on Hover or Focus	AA
2.1.1 Keyboard	A
2.4.3 Focus Order	A
2.4.7 Focus Visible	AA
4.1.2 Name, Role, Value	A
2.5.1 Pointer Gestures	A

Automated test results: Accessibility and compliance.

Notes and known caveats

• The generated summary names the chart type, series and category counts, the category range, the primary (and secondary) axis range, each series’ minimum and maximum with their categories and trend, missing values, and hidden series.
• Meaning never depends on color alone: bars carry textures, lines dash patterns and marker shapes, repeated in the legend keys.
• Forced colors: marks use CanvasText (bubbles and outlines Canvas/CanvasText) and keep shapes and textures; focus uses Highlight.
• No animation: nothing moves on render; hover and focus emphasis transitions are removed under prefers-reduced-motion and animation: none.
• Zoom changes are announced politely (“Showing {from} to {to}.” or “Showing all data.”) and emitted as aui-zoom. Pointer gestures (Ctrl/Cmd + wheel, drag pan, Shift + drag selection) have keyboard and toolbar equivalents.
• The crosshair (crosshair option) is aria-hidden and follows both hover and keyboard focus; it hides when focus and the pointer leave.
• Hovering a category shows every visible series of that category in one tooltip; keyboard focus shows the focused mark only.
• Manual screen-reader verification (NVDA, JAWS, VoiceOver, TalkBack) is pending.
• aria-roledescription support varies; screen readers without it announce “group”.
• The secondary axis is identified by its title (secondaryAxis.label); without one, the summary calls it “Secondary axis”.

Behavior

States

default, empty (“No data”), all series hidden (“All series are hidden”), series hidden, mark focused (tooltip), hovered (category tooltip), crosshair shown, zoomed, panning or selecting (pointer drag), table open.

State transitions

From	Trigger	To
any	legend button (click, Enter, Space)	series hidden or shown; aui-series-toggle emitted; axes rescale
plot not focused	Tab	active mark focused, tooltip shown
mark focused	arrow keys, Home, End, PageUp, PageDown	another mark focused
tooltip visible	Escape	tooltip hidden, focus unchanged
not zoomed	Zoom in, +/=, Ctrl/Cmd + wheel up, Shift + drag	zoomed; “Showing {first} to {last}.” announced with category names; aui-zoom emitted
zoomed	Zoom out, -, drag, arrow key past the window edge	window widened or moved; announced; aui-zoom emitted
zoomed	Reset zoom, 0	all categories shown (“Showing all data.”); aui-zoom with x: null
table closed	Show data table	table built and shown

Accessibility notes

• The summary names the type, series and category counts, the category range, the primary (and secondary) axis range, each series’ minimum, maximum, and trend, missing values, and hidden series.
• Bars carry textures; lines carry dash patterns and marker shapes; legend keys repeat them. Forced colors use CanvasText and keep shapes and textures; focus uses Highlight.
• Zoom changes are announced politely; every pointer gesture has a keyboard and toolbar equivalent. The crosshair follows hover and keyboard focus and is aria-hidden.
• Name the secondary axis with secondaryAxis.label; otherwise the summary calls it “Secondary axis”.
• Manual screen-reader verification is pending.

Responsive behavior

The width follows the container (ResizeObserver); the height is height. Category labels thin and truncate with the band width; each value axis reserves the width of its labels. Reflows at 320 CSS px.

Right-to-left

direction: 'rtl' mirrors the category axis (first category at the right), puts the primary axis on the right and the secondary on the left, reverses bar order within a group, and swaps ArrowLeft/ArrowRight.

Theming

Series colors come from color-chart-1..8 by palette slot (series position, or color). Bars are separated by a color-surface stroke; areas are a 12% fill of the series color under the line.

Global configuration

configureAbsoluteUI({ components: { comboChart: { crosshair: true, legend: 'show', height: 320 } } });

Changes apply to existing instances immediately.

Component configuration

Instance options override global and theme defaults. All options are dynamic. zoom and zoomRange are instance-only.

Timezones

Not applicable: categories are text; no dates are formatted.

Icons

No icons option. The zoom buttons render the icons plus, minus, and refresh through @absoluteui/icons; a global icon provider or registry entry for those names replaces them in every component that uses them.

Security

All text uses textContent; SVG is built with createElementNS. Colors are classes; sizes and the tooltip position are written through the CSSOM. No innerHTML, style attributes, or inline handlers.

Data handling

Renders the given data only; no persistence, network access, or telemetry. Validation errors name the option, never its value.

Performance

Budget: ComboChart.create with 3 series x 200 categories under 60 ms in headless Chromium, including the first render (e2e performance test, tests/e2e/perf-r3.spec.ts). One DOM node per bar and per line point (no virtual marks); the data table is built only when opened in toggle mode.

Supported data scale

Tested with 3 series x 200 categories. For longer category lists, enable zoom to show a window.

Edge cases

• No categories or no series, or only missing values: “No data”.
• Every series hidden: “All series are hidden”.
• An axis with bars or areas always includes zero; a line-only axis includes zero only with includeZero.
• Values outside a fixed min/max are clamped to the plot edge.
• formatValue overrides both axis formats.
• The secondary axis appears only while a visible series uses it.

Errors

Code	Category	Cause
COMBO_CHART_OPTIONS	configuration	Missing label; categories not strings; series ids not unique; invalid type or axis; values length differs from categories; invalid axis options or format; invalid zoom or zoomRange.
CFG_INVALID_VALUE / CFG_UNKNOWN_OPTION	configuration	Invalid or unknown configuration.

A failed construction leaves the host untouched; a failed update() keeps the previous state.

Known limitations

• Each series needs one value per category.
• Only bars stack; the secondary axis has no gridlines.
• Axis label widths are estimated (about 0.6 em per character).
• Manual screen-reader verification is pending.

Unsupported scenarios

• More than two value axes; logarithmic axes.
• Numeric or time category axes.
• Zoom on the value axes; linked zoom across charts.
• HTML in labels or tooltips.