Node / Charts · guide
Combo chart (bars + lines)
Current Apexify.js 6.0.0 documentation for Combo chart (bars + lines).
One Cartesian canvas combining bars (primary / left Y-axis) with lines (default secondary / right Y-axis).
Implementation: createComboChart in lib-next/chart/impl/combochart.ts — types ComboChartOptions, ComboLineSeries, ComboBarsType, ComboChartOpacity.
When to use combo vs comparison
| Approach | Use when |
|---|---|
createComboChart | Bars and lines share one plot region, aligned X, dual Y scales (e.g. revenue bars + margin % line). |
createComparisonChart | Two independent charts (maybe different types) in two cells. |
Required inputs
| Field | Type | Notes |
|---|---|---|
bars | BarChartData[] | Same rows as createChart('bar', …): label, xStart/xEnd, value or values segments. |
lines | ComboLineSeries[] | Extends LineSeries (impl/linechart.ts) with yAxis?: 'primary' | 'secondary' (default secondary) and optional opacity. |
Bar modes (barsType)
ComboBarsType: standard (default) · grouped · stacked.
| Mode | Needs | Scaling |
|---|---|---|
standard | BarChartData.value per category | Column heights from value. |
grouped | values: BarSegment[] per row | Side-by-side segments (barStyle.groupSpacing default 10). |
stacked | values | Summed stack height drives primary Y max. |
Axes (axes)
| Key | Role |
|---|---|
axes.x | AxisConfig — labels, range, values, tick toggles (same type as line chart). |
axes.y | Primary (left) scale for bars — tick colour may inherit first bar colour when color omitted. |
axes.ySecondary | Secondary (right) scale for lines — colour may inherit **first line using yAxis: 'secondary'. |
Force ComboLineSeries.yAxis: 'primary' when a line must align with bar magnitudes.
Opacity (opacity)
ComboChartOpacity multiplies globalAlpha while drawing layers:
bars, lines, grid, primaryAxis, secondaryAxis, xAxis, chartTitle, legend, barLabels, valueLabels, pointLabels.
Legend & labels
legend matches cartesian charts (fit, stretch, maxWidth, entries, textStyle, …) — see Shared appearance.
labels blocks:
| Block | Role |
|---|---|
title | Chart heading (textStyle, gradients). |
barLabelDefaults | show, fontSize, defaultPosition. |
valueLabelDefaults | Column value chips. |
pointLabelDefaults | Line point captions (position: top/bottom/left/right). |
Grid & bar styling
grid: show, color, width.
barStyle: minWidth, groupSpacing, opacity, shadow, stroke — defaults merged before per-bar overrides.
secondaryYAxis: show?: boolean — defaults on when any line uses secondary.
Dimensions & width heuristic
Combo recomputes canvas width from X span when categories justify it (comboResponsiveWidth). For dashboards with fixed slots, set dimensions.width explicitly (same guidance as vertical bar charts).