Advanced / Scene · guide

Scene layers — charts

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

apexify.jsRuntime: nodeCURRENTSince 6.0.0

Chart layers call ChartCreator internally, loadImage on the returned PNG, then drawImage at x,y with optional width, height, opacity.

Typing note: In SceneLayer, data and options are unknown for chart / chartComparison / chartCombo — you are responsible for shapes that match ChartCreator. See Charts overview and per-chart guides under 03-feature-guides/charts/.

chart

Variant: pie (simple slices)

1{2  type: "chart",3  chartType: "pie",4  data: [5    { label: "North", value: 40, color: "#3b82f6" },6    { label: "South", value: 35, color: "#10b981" },7    { label: "East", value: 25, color: "#f59e0b" },8  ],9  options: { title: "Regions" },10  x: 60,11  y: 120,12  width: 400,13  height: 400,14  opacity: 1,15}

Variant: pie + smaller footprint (thumbnail chart)

1{2  type: "chart",3  chartType: "pie",4  data: [5    { label: "A", value: 1, color: "#ccc" },6    { label: "B", value: 3, color: "#333" },7  ],8  options: { dimensions: { width: 200, height: 200 } },9  x: 500,10  y: 40,11  width: 200,12  height: 200,13  opacity: 0.95,14}

Variant: line chart (numeric LineDataPoint[])

1{2  type: "chart",3  chartType: "line",4  data: [5    {6      label: "Revenue",7      color: "#6366f1",8      data: [9        { x: 0, y: 12 },10        { x: 1, y: 18 },11        { x: 2, y: 15 },12        { x: 3, y: 22 },13      ],14    },15  ],16  options: { title: "Trend" },17  x: 40,18  y: 280,19  width: 520,20  height: 260,21}

See Line chart for LineChartOptions, multiple series, markers, and area fills.

Variant: bar chart

Bar data uses BarChartData (label, xStart, xEnd, value/values, …). Prefer copying a working config from Bar chart into data / options.

1{2  type: "chart",3  chartType: "bar",4  data: [5    /* BarChartData[] from the bar chart guide */6  ],7  options: {8    /* BarChartOptions */9  },10  x: 32,11  y: 200,12  width: 700,13  height: 380,14}

Variant: radar / polarArea / scatter / horizontalBar

Switch chartType and swap data / options per Charts hub. Position with x,y,width,height the same way.

chartComparison

Calls createComparisonChart(layer.options) — no separate data field.

1{2  type: "chartComparison",3  options: {4    // ComparisonChartOptions — see docs/03-feature-guides/charts/10-chart-comparison.mdx5    title: "Plan vs actual",6    // …series, dimensions, appearance…7  },8  x: 0,9  y: 420,10  width: 900,11  height: 320,12  opacity: 1,13}

Variant: two comparison tiles (two layers)

1const layers = [2  {3    type: "chartComparison" as const,4    options: { /* first comparison config */ },5    x: 0,6    y: 0,7    width: 480,8    height: 300,9  },10  {11    type: "chartComparison" as const,12    options: { /* second comparison config */ },13    x: 500,14    y: 0,15    width: 480,16    height: 300,17  },18];

chartCombo

1{2  type: "chartCombo",3  options: {4    // ComboChartOptions — see charts/09-chart-combo5  },6  x: 40,7  y: 500,8  width: 880,9  height: 360,10}

Caching pattern (heavy static charts)

Each chart layer re-renders the chart on every render(). If the chart is static, pre-render with createChart once, then use imageBuffer instead of chart:

1const chartPng = await painter.createChart("pie", pieData, pieOptions);2 3const layers = [4  { type: "imageBuffer" as const, buffer: chartPng, x: 40, y: 80, width: 400, height: 400 },5];

#chart

##Variant: pie (simple slices)

##Variant: pie + smaller footprint (thumbnail chart)

##Variant: line chart (numeric LineDataPoint[])

##Variant: bar chart

##Variant: radar / polarArea / scatter / horizontalBar

#chartComparison

##Variant: two comparison tiles (two layers)

#chartCombo

#Caching pattern (heavy static charts)

Related guides and reference

Next steps