PPTX

Charts

Create charts in presentations — column, line, pie, doughnut, radar, bubble and more

Use the chart property in a slide child to embed charts. Charts are configured with a flat options object — pass type, categories, and series directly.

Basic Chart

{
  "slides": [
    {
      "children": [
        {
          "chart": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "21.2cm",
            "height": "9.3cm",
            "type": "column",
            "title": "Quarterly Sales",
            "categories": ["Q1", "Q2", "Q3", "Q4"],
            "series": [
              { "name": "Revenue", "values": [10, 20, 15, 25] },
              { "name": "Expenses", "values": [8, 12, 10, 14] }
            ],
            "showLegend": true,
            "style": 2
          }
        }
      ]
    }
  ]
}

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [
        {
          chart: {
            x: "1.3cm",
            y: "1.3cm",
            width: "21.2cm",
            height: "9.3cm",
            type: "column",
            title: "Quarterly Sales",
            categories: ["Q1", "Q2", "Q3", "Q4"],
            series: [
              { name: "Revenue", values: [10, 20, 15, 25] },
              { name: "Expenses", values: [8, 12, 10, 14] },
            ],
            showLegend: true,
            style: 2,
          },
        },
      ],
    },
  ],
});

Chart Types

`type`	Description
`"column"`	Vertical bars
`"bar"`	Horizontal bars
`"line"`	Line chart
`"pie"`	Pie chart
`"area"`	Area chart
`"scatter"`	Scatter / XY chart
`"doughnut"`	Doughnut / ring chart
`"radar"`	Radar / spider chart
`"bubble"`	Bubble chart (requires xValues/yValues/bubbleSize)
`"stock"`	Stock chart (high-low-close)
`"surface"`	3D surface chart

Set threeD: true to render column, bar, line, pie, or area as 3D variants.

Pie Chart

{
  "slides": [
    {
      "children": [
        {
          "chart": {
            "x": "2.6cm",
            "y": "2.6cm",
            "width": "15.9cm",
            "height": "9.3cm",
            "type": "pie",
            "title": "Market Share",
            "categories": ["Chrome", "Safari", "Firefox", "Edge", "Other"],
            "series": [{ "name": "Browser", "values": [65, 18, 3, 5, 9] }]
          }
        }
      ]
    }
  ]
}

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [
        {
          chart: {
            x: "2.6cm",
            y: "2.6cm",
            width: "15.9cm",
            height: "9.3cm",
            type: "pie",
            title: "Market Share",
            categories: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
            series: [{ name: "Browser", values: [65, 18, 3, 5, 9] }],
          },
        },
      ],
    },
  ],
});

Line Chart

{
  "slides": [
    {
      "children": [
        {
          "chart": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "21.2cm",
            "height": "9.3cm",
            "type": "line",
            "title": "Monthly Revenue",
            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            "series": [
              { "name": "2024", "values": [10, 15, 13, 20, 25, 30] },
              { "name": "2025", "values": [12, 18, 16, 22, 28, 35] }
            ],
            "style": 2
          }
        }
      ]
    }
  ]
}

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [
        {
          chart: {
            x: "1.3cm",
            y: "1.3cm",
            width: "21.2cm",
            height: "9.3cm",
            type: "line",
            title: "Monthly Revenue",
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            series: [
              { name: "2024", values: [10, 15, 13, 20, 25, 30] },
              { name: "2025", values: [12, 18, 16, 22, 28, 35] },
            ],
            style: 2,
          },
        },
      ],
    },
  ],
});

Scatter Chart

{
  "slides": [
    {
      "children": [
        {
          "chart": {
            "x": "1.3cm",
            "y": "1.3cm",
            "width": "21.2cm",
            "height": "9.3cm",
            "type": "scatter",
            "series": [
              { "name": "Dataset A", "values": [2, 4, 1, 5, 3] },
              { "name": "Dataset B", "values": [8, 6, 9, 3, 7] }
            ]
          }
        }
      ]
    }
  ]
}

import { generatePresentation } from "@office-open/pptx";

generatePresentation({
  slides: [
    {
      children: [
        {
          chart: {
            x: "1.3cm",
            y: "1.3cm",
            width: "21.2cm",
            height: "9.3cm",
            type: "scatter",
            series: [
              { name: "Dataset A", values: [2, 4, 1, 5, 3] },
              { name: "Dataset B", values: [8, 6, 9, 3, 7] },
            ],
          },
        },
      ],
    },
  ],
});

| Property | Type | Description | | ------------ | ------------------- | ----------------------------------- | ------------------- | | x | number | UniversalMeasure | Horizontal position | | y | number | UniversalMeasure | Vertical position | | width | number | UniversalMeasure | Width | | height | number | UniversalMeasure | Height | | type | ChartType | Chart type string (see table above) | | title | string | Chart title | | categories | string[] | Category labels | | series | ChartSeriesData[] | Data series | | showLegend | boolean | Show legend | | style | number | Chart style ID |

Series Data

Property	Type	Description
`name`	`string`	Series name
`values`	`number[]`	Data values

Edit this pageorReport an issue

Images

Embed pictures, set slide backgrounds, and use image fills on shapes

SmartArt

Create predefined SmartArt diagrams for processes, hierarchies, and more