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

Render a bar chart

Executable example · practical

Render a bar chart

Render a practical bar chart as a verified 480×320 PNG through ApexPainter.createChart().

✓ VerifiedRuntime: nodeapexify.js

Prerequisites

  • Node.js 22, 24, or 26
  • apexify.js 6.0.0

Authoritative source

SOURCEtypescript
typescript
Studio
import { mkdir, writeFile } from 'node:fs/promises';import { join } from 'node:path';import { ApexPainter } from 'apexify.js'; const outputDir = process.env.APEXIFY_EXAMPLE_OUTPUT_DIR;if (!outputDir) throw new Error('APEXIFY_EXAMPLE_OUTPUT_DIR is required.'); const painter = new ApexPainter({ type: 'buffer' });const data = [  { label: 'Docs', value: 72, xStart: 0, xEnd: 1, color: '#6366f1' },  { label: 'API', value: 58, xStart: 1, xEnd: 2, color: '#8b5cf6' },  { label: 'Gallery', value: 50, xStart: 2, xEnd: 3, color: '#ec4899' },];const png = await painter.createChart('bar', data, { dimensions: { width: 480, height: 320 } });if (!Buffer.isBuffer(png)) throw new Error('Expected createChart() to return a PNG Buffer.'); await mkdir(outputDir, { recursive: true });await writeFile(join(outputDir, 'chart-bar.png'), png);console.log(JSON.stringify({ example: 'node.chart.bar', format: 'png', width: 480, height: 320, bytes: png.length }));

Source hash: cd7a888b8b826223996d9aa4d2a7769e6eed61bc8753315d90bd594d838c8baa. The displayed payload is generated from the files executed by DOC-5 verification.

Verified output · chart-bar.png
Render a bar chart verified output
480 × 320 · metadata verification

Goal

Turn structured bar data into a server-generated chart image.

Important options

  • chart type: bar
  • dimensions.width
  • dimensions.height

Why these choices

  • A fixed chart type keeps the example focused.
  • Explicit dimensions allow PNG metadata verification without pixel-fragile golden tests.

Variants

  • Use the same createChart API with pie, line, scatter, radar, horizontalBar, or polarArea data shapes.

Performance note

Chart rendering is CPU-bound and local; this example intentionally uses three bars.

Error note

Malformed chart data or non-finite numeric input is rejected by Apexify.js validation.

Related documentation

Related API

Next steps

Combine rendered output with application metadata as shown in node.integration.report.

Next steps