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

Node / Charts · guide

Vertical bar chart

Current Apexify.js 6.0.0 documentation for Vertical bar chart.

apexify.jsRuntime: nodeCURRENTSince 6.0.0
SOURCEtypescript
typescript
Studio
await painter.createChart('bar', data, options);

BarChartType

standard | grouped | stacked | waterfall | lollipop

Set via options.type.

BarChartData — positioning & values

FieldRole
labelCategory label (X band).
valueSingle column (standard, waterfall, lollipop).
valuesBarSegment[] for grouped / stacked.
xStart, xEndNumeric X extent of the bar along the axis (continuous positioning).
color, gradientBar / row fallback fill.
labelColor, labelPositiontop | left | right | inside | bottom.
valueColor, showValueValue label styling.
opacity, shadow, strokePer-bar overrides.

BarSegment

value (required), color, gradient, label (custom value text), valueColor, showValue, opacity, shadow, stroke.

BarChartOptions highlights

BlockKeys
typeBarChartType.
waterfallinitialValue — starting baseline for waterfall stepping.
axes.x, axes.yAxisConfig (range, values ticks, label, tickFontSize, …). Y supports baseline.
barsspacing, minWidth, groupSpacing, segmentSpacing, lineWidth, dotSize (lollipop), opacity, shadow, stroke.
labelstitle, barLabelDefaults, valueLabelDefaults.
legend, gridSee shared.

Axes (axes)

Vertical AxisConfig (impl/barchart.ts) supports label, labelColor, range, values, color, width, tickFontSize, valueSpacing. axes.y adds baseline for waterfall/spine alignment.

Richer behaviour (scale: 'log', dateTime, showTickMarks/showTickLabels) belongs to line / scatter / combo (impl/linechart.ts AxisConfig). Comparison bar panels still use this bar subset unless you switch the panel type.

SOURCEtypescript
typescript
Studio
await painter.createChart(  'bar',  [    { label: 'Q1', value: 120, xStart: 0, xEnd: 1, color: '#3b82f6' },    { label: 'Q2', value: 180, xStart: 1, xEnd: 2, color: '#8b5cf6' },    { label: 'Q3', value: 150, xStart: 2, xEnd: 3, color: '#10b981' },  ],  {    type: 'standard',    dimensions: { width: 720, height: 420 },    axes: {      y: { label: 'Revenue (k)', range: { min: 0, max: 200, step: 50 } },    },    grid: { show: true, color: '#e2e8f0' },  });

Example — grouped (values)

SOURCEtypescript
typescript
Studio
await painter.createChart(  'bar',  [    {      label: 'North',      xStart: 0,      xEnd: 1,      values: [        { value: 40, color: '#60a5fa' },        { value: 55, color: '#34d399' },      ],    },    {      label: 'South',      xStart: 1,      xEnd: 2,      values: [        { value: 30, color: '#60a5fa' },        { value: 48, color: '#34d399' },      ],    },  ],  {    type: 'grouped',    bars: { groupSpacing: 8, segmentSpacing: 4 },    legend: {      entries: [        { label: 'Product A', color: '#60a5fa' },        { label: 'Product B', color: '#34d399' },      ],    },  });

Example — stacked + waterfall snippet

Stacked: type: 'stacked' — segment heights sum vertically.

Waterfall:

SOURCEtypescript
typescript
Studio
options: {  type: 'waterfall',  waterfall: { initialValue: 100 },  // rows: use value as delta from running total per renderer logic}

(Tune axes.y.range so negative deltas remain visible.)

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.

Scene layers — chartsGuide · node · CURRENT

Current Apexify.js 6.0.0 documentation for Scene layers — charts.