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

Node / Charts · guide

Horizontal bar chart

Current Apexify.js 6.0.0 documentation for Horizontal bar chart.

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

HorizontalBarChartType

standard | grouped | stacked | lollipop — options.type.

HorizontalBarChartData

FieldRole
labelRow label.
valueSingle bar length.
valuesHorizontalBarSegment[] for grouped/stacked.
xStart, xEndOptional value-axis extent (category axis is vertical).
yStart, yEndOptional row band on Y (numeric category positioning).
color, gradient, labelColor, labelPositionSame spirit as vertical bar.
opacityOverrides options.bars.opacity.

HorizontalAxisConfig (axes.x / axes.y)

label, labelColor, range, values, color, width, tickFontSize, tickColor, valueSpacing.

axes.x adds baseline (value spine alignment).

HorizontalBarChartOptions extras vs vertical

grid.style: solid | dashed | dotted plus lineWidth.

bars: minHeight, borderRadius (rounded bar ends), spacing, groupSpacing, segmentSpacing, lineWidth, dotSize, opacity.

Example — simple horizontal ranking

SOURCEtypescript
typescript
Studio
await painter.createChart(  'horizontalBar',  [    { label: 'TypeScript', value: 92, yStart: 0, yEnd: 1, color: '#3178c6' },    { label: 'Rust', value: 88, yStart: 1, yEnd: 2, color: '#dea584' },    { label: 'Go', value: 74, yStart: 2, yEnd: 3, color: '#00add8' },  ],  {    type: 'standard',    dimensions: { width: 680, height: 360 },    axes: {      x: { label: 'Score', range: { min: 0, max: 100, step: 25 } },    },    bars: { borderRadius: 6 },  });

Example — stacked rows

SOURCEtypescript
typescript
Studio
await painter.createChart(  'horizontalBar',  [    {      label: 'Team A',      yStart: 0,      yEnd: 1,      values: [        { value: 20, color: '#94a3b8' },        { value: 35, color: '#64748b' },      ],    },  ],  { type: 'stacked', bars: { segmentSpacing: 0 } });

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.