PPTX
Charts
Create bar, line, pie, area, and scatter charts in presentations
@office-open/pptx supports various chart types through ChartFrame and dedicated chart classes.
Basic Chart
import { Slide, ChartFrame, BarChart } from "@office-open/pptx";
new Slide({
children: [
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new BarChart({
categories: ["Q1", "Q2", "Q3", "Q4"],
series: [
{ name: "Revenue", data: [10, 20, 15, 25] },
{ name: "Expenses", data: [8, 12, 10, 14] },
],
}),
}),
],
});
Bar Chart
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new BarChart({
categories: ["Product A", "Product B", "Product C"],
series: [
{ name: "2024", data: [100, 150, 80] },
{ name: "2025", data: [120, 180, 95] },
],
barDir: "col", // "col" for vertical, "bar" for horizontal
barGrouping: "clustered", // "clustered" | "stacked" | "percentStacked"
}),
});
Line Chart
import { LineChart } from "@office-open/pptx";
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new LineChart({
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
series: [
{ name: "Users", data: [100, 150, 200, 280, 350, 420] },
{ name: "Sessions", data: [300, 450, 600, 800, 1000, 1200] },
],
}),
});
Pie Chart
import { PieChart } from "@office-open/pptx";
new ChartFrame({
x: 2,
y: 1,
width: 6,
height: 5,
chart: new PieChart({
categories: ["Desktop", "Mobile", "Tablet"],
series: [{ name: "Traffic", data: [45, 40, 15] }],
}),
});
Area Chart
import { AreaChart } from "@office-open/pptx";
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new AreaChart({
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
series: [{ name: "Sales", data: [10, 15, 13, 18, 20] }],
areaGrouping: "stacked", // "standard" | "stacked" | "percentStacked"
}),
});
Scatter Chart
import { ScatterChart } from "@office-open/pptx";
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new ScatterChart({
series: [
{
name: "Dataset A",
xValues: [1, 2, 3, 4, 5],
yValues: [2, 4, 1, 5, 3],
},
{
name: "Dataset B",
xValues: [1, 3, 5, 7, 9],
yValues: [8, 6, 9, 3, 7],
},
],
}),
});
Chart Title and Styling
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: new BarChart({
title: "Quarterly Revenue",
categories: ["Q1", "Q2", "Q3", "Q4"],
series: [
{
name: "Revenue",
data: [100, 150, 120, 180],
fill: { type: "solid", color: "4472C4" },
},
],
showLegend: true,
showValue: true,
}),
});
Chart Frame Options
new ChartFrame({
x: 1,
y: 1,
width: 8,
height: 5,
chart: myChart,
fill: { type: "solid", color: "FFFFFF" },
outline: { color: "CCCCCC", width: 1 },
});