Skip to content
Apexify.jsDocs
Apexify.js version v5.4.5

Node / Charts · guide

Comparison chart (two panels)

Current Apexify.js 6.0.0 documentation for Comparison chart (two panels).

apexify.jsRuntime: nodeCURRENTSince 6.0.0

Renders two standalone charts into one PNG — chart1 and chart2 each call the same engines as createChart (createPieChart, createBarChart, …). Sub-chart buffers are uniformly scaled and centered inside their cells (contain — aspect preserved, letterboxed).

SOURCEtypescript
typescript
Studio
const buf = await painter.createComparisonChart(options);

Implementation: createComparisonChart in lib-next/chart/impl/comparisonchart.ts.

Top-level (ComparisonChartOptions)

FieldDefaultRole
dimensions.width2400Outer canvas width.
dimensions.height1200Outer canvas height.
dimensions.paddingtop ~100, others ~60Outer margins around title + chart strip.
layoutsideBySidesideBySide | topBottom.
spacing40Gap between cells (horizontal or vertical).
appearance—ChartAppearanceExtended painted once on the outer canvas; merged into each child options.appearance when panels omit colours (mergeInheritedChartAppearance).
generalTitleoptionalBanner heading spanning full width (text required when present).
chart1, chart2requiredComparisonChartConfig each.

Panel config (ComparisonChartConfig)

FieldRole
typeComparisonChartType — pie, bar, horizontalBar, line, scatter, radar, polarArea, donut.
dataCorrect union for type (PieSlice[], BarChartData[], LineSeries[], …).
optionsMatching PieChartOptions, BarChartOptions, LineChartOptions, …
titleOptional panel subtitle merged into options.labels.title ( text plus styling fields).
barTypeWhen type === 'bar', overrides BarChartOptions.type (standard, grouped, stacked, lollipop, waterfall).
lineStyle, lineSmoothnessWhen type === 'line', applied to LineSeries missing lineStyle / smoothness.

donut panels

Use type: 'donut'. Renderer maps to createPieChart and forces PieChartOptions.type = 'donut'. Put donutInnerRadius etc. inside options like a normal pie chart.

Layout maths

sideBySide: each cell width (availableWidth - spacing) / 2, full availableHeight.

topBottom: full availableWidth, cell height (availableHeight - spacing) / 2.

generalTitle reserves fontSize + 40 px below padding.top.

Cell sizing & padding

Each panel receives dimensions.width/height replaced by computed cell size. Inner padding is paddingForCell(...) — scales your requested padding (~850 px reference) so margins stay sane inside small cells.

Charts render native PNG size ≈ cell size, then drawChartImageContain fits without distortion.

Legend forwarding

Pie panels forward PieChartOptions.legends. Cartesian panels forward legend only when legend.entries is non-empty — supply entries explicitly when you need a legend inside comparison cells.

Example — sideBySide donut vs grouped bar

SOURCEtypescript
typescript
Studio
await painter.createComparisonChart({  dimensions: { width: 1400, height: 720 },  layout: 'sideBySide',  spacing: 36,  appearance: {    backgroundColor: '#f8fafc',    noiseBg: { intensity: 0.03 },  },  generalTitle: {    text: 'Share vs throughput',    fontSize: 26,    color: '#0f172a',  },  chart1: {    type: 'donut',    data: [      { label: 'API', value: 45, color: '#6366f1' },      { label: 'Web', value: 35, color: '#22c55e' },      { label: 'CLI', value: 20, color: '#f97316' },    ],    options: {      donutInnerRadius: 72,      labels: { title: { text: 'Traffic mix', fontSize: 18 } },      legends: { standard: { position: 'bottom', fontSize: 13 } },    },  },  chart2: {    type: 'bar',    barType: 'grouped',    data: [      {        label: 'EU',        xStart: 0,        xEnd: 1,        values: [          { value: 120, color: '#38bdf8' },          { value: 95, color: '#34d399' },        ],      },      {        label: 'US',        xStart: 1,        xEnd: 2,        values: [          { value: 140, color: '#38bdf8' },          { value: 110, color: '#34d399' },        ],      },    ],    options: {      labels: { title: { text: 'Regional orders', fontSize: 18 } },      axes: { y: { label: 'Units', range: { min: 0, max: 280 } } },      legend: {        show: true,        entries: [          { label: 'Retail', color: '#38bdf8' },          { label: 'Wholesale', color: '#34d399' },        ],        position: 'bottom',      },      grid: { show: true },    },  },});

Example — topBottom lines with propagated lineStyle

SOURCEtypescript
typescript
Studio
await painter.createComparisonChart({  dimensions: { width: 1100, height: 980 },  layout: 'topBottom',  spacing: 28,  chart1: {    type: 'line',    lineStyle: 'dashed',    lineSmoothness: 'bezier',    data: [      {        label: 'Latency',        color: '#dc2626',        data: [          { x: 0, y: 42 },          { x: 1, y: 38 },          { x: 2, y: 36 },        ],      },    ],    options: {      labels: { title: { text: 'p95 latency (ms)', fontSize: 16 } },      axes: {        x: { range: { min: 0, max: 2 } },        y: { range: { min: 0, max: 50 } },      },    },  },  chart2: {    type: 'scatter',    data: [      {        label: 'Errors',        markerSize: 12,        markerType: 'circle',        color: '#7c3aed',        data: [          { x: 1, y: 2 },          { x: 2, y: 5 },          { x: 3, y: 4 },        ],      },    ],    options: {      labels: { title: { text: 'Incidents vs build', fontSize: 16 } },      axes: {        x: { range: { min: 0, max: 4 } },        y: { range: { min: 0, max: 8 } },      },      grid: { show: true },    },  },});

Scenes

Use SceneLayer type: 'chartComparison' with the same options object (x, y, width, height, opacity placement fields per scene.ts).

Types

ComparisonChartOptions, ComparisonChartConfig, ComparisonLayout, ComparisonChartType live in lib-next/chart/impl/comparisonchart.ts (re-exported through apexify.js chart surface).

Next steps

Charts — overviewGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Charts — overview.

Shared chart appearance & layoutGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Shared chart appearance & layout.

Pie & donutGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Pie & donut.

Vertical bar chartGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Vertical bar chart.