v5.4.5

Node / Charts · guide

Pie & donut

Current Apexify.js 6.0.0 documentation for Pie & donut.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

1await painter.createChart('pie', slices, options);

PieSlice (required fields label, value)

Field	Purpose
`color`, `gradient`	Fill (`gradient` wins via `createGradientFill`).
`opacity`	Slice fill multiplier.
`showValue`, `showLabel`	Per-slice overrides (defaults bubble from `options.labels`).
`valueLabel`	Custom text instead of raw `value`.
`shadow`, `stroke`	Per-slice effects.

PieChartOptions highlights

Block	Keys
`type`	`pie` (default) or `donut`.
`donutInnerRadius`	Inner hole radius when `type: 'donut'`.
`dimensions`	`width`/`height`/`padding`.
`appearance`	Shared.
`labels.title`	Chart title.
`labels.sliceLabels`, `valueLabels`	`fontSize`, `color`, `gradient`, `textStyle`.
`labels.showValues`, `showLabels`, `valueFormat(value, percentage)`	Global toggles / formatter.
`legends.standard`	`show`, `position`, box styling, `wrapText`, `maxWidth`, …
`legends.connected`	Pie-specific leader-line legend — `lineColor`, `lineGradient`, `lineWidth`.
`slices`	Global `opacity`, `shadow`, `stroke` defaults for all arcs.

Example — simple pie

1const buf = await painter.createChart(2  'pie',3  [4    { label: 'Desktop', value: 58, color: '#6366f1' },5    { label: 'Mobile', value: 32, color: '#22c55e' },6    { label: 'Tablet', value: 10, color: '#f97316' },7  ],8  {9    dimensions: { width: 640, height: 480 },10    labels: {11      title: { text: 'Traffic share', fontSize: 22 },12      showValues: true,13      valueFormat: (v, pct) => `${pct.toFixed(1)}%`,14    },15    legends: {16      standard: { position: 'right', fontSize: 14 },17    },18  }19);

Example — donut + gradients + appearance

1const donut = await painter.createChart(2  'pie',3  [4    {5      label: 'A',6      value: 40,7      gradient: {8        type: 'linear',9        startX: 0,10        startY: 0,11        endX: 200,12        endY: 200,13        colors: [14          { stop: 0, color: '#a855f7' },15          { stop: 1, color: '#ec4899' },16        ],17      },18    },19    { label: 'B', value: 35, color: '#38bdf8' },20    { label: 'C', value: 25, color: '#34d399' },21  ],22  {23    type: 'donut',24    donutInnerRadius: 70,25    appearance: {26      backgroundColor: '#0f172a',27      noiseBg: { intensity: 0.04 },28    },29    labels: {30      title: { text: 'Mix', fontSize: 20, color: '#f8fafc' },31      sliceLabels: { fontSize: 11, color: '#e2e8f0' },32    },33    legends: {34      standard: {35        position: 'bottom',36        textColor: '#f1f5f9',37        backgroundColor: 'rgba(30,41,59,0.6)',38      },39    },40  }41);

Next steps