<!-- /md/index.md -->


# SlidePack API Documentation

SlidePack API generates PowerPoint files from pptx templates and JSON data.

[See our service introduction](https://slidepack.io/)


# Getting Started

SlidePack is an HTTP API service, but you can give it a spin from your [Dashboard](https://slidepack.io/app).

This document will guide you through HTTP API usage.

You will need an API token to interact with SlidePack through the HTTP API.
If you don't have an API token, please sign up / sign in to your Dashboard and create one.

[Create your API token](https://slidepack.io/app)


# Next Up

Once you have your API token, proceed to [Quickstart](/md/guides/quickstart.md) to make your first API request.


---

# Table of Contents

## Guides

- [Quickstart](/md/guides/quickstart.md)
- [Template and Data](/md/guides/template-and-data.md)
- [API Limits](/md/guides/limits.md)
- [Render from Excel](/md/guides/excel.md)

## Reference

- [API Endpoints](/md/reference/endpoints.md)
- [data.json](/md/reference/data-json.md)

## Recipes

- [Repeating template slides](/md/recipes/001-repeat-slides/doc.md)
- [Text](/md/recipes/010-text/doc.md)
- [Text with options](/md/recipes/011-text-options/doc.md)
- [Text styles](/md/recipes/012-text-styles/doc.md)
- [Lists](/md/recipes/013-list/doc.md)
- [Tables](/md/recipes/020-table/doc.md)
- [Table with options](/md/recipes/021-table-options/doc.md)
- [Table auto-resize](/md/recipes/022-table-size/doc.md)
- [Table data bars](/md/recipes/023-table-databars/doc.md)
- [Charts](/md/recipes/030-chart/doc.md)
- [Dynamic chart series](/md/recipes/031-chart-dynamic-series/doc.md)
- [Chart data point styles](/md/recipes/032-chart-data-point-styles/doc.md)
- [Chart label interval](/md/recipes/033-chart-label-interval/doc.md)
- [Various types of charts](/md/recipes/034-charts/doc.md)
- [Scatter charts](/md/recipes/035-scatter-chart/doc.md)
- [Images](/md/recipes/040-image/doc.md)
- [Image scaling](/md/recipes/041-image-scaling/doc.md)
- [Video](/md/recipes/050-video/doc.md)
- [Changing theme colors](/md/recipes/060-theme/doc.md)
- [Analytics report](/md/recipes/100-analytics-report/doc.md)
- [Product catalog](/md/recipes/101-product-catalog/doc.md)


--------------------------------------------------

<!-- /md/guides/quickstart.md -->


# Quickstart

This page will guide you through your first SlidePack render using the HTTP API.

You will need an API token to interact with the SlidePack API.
If you don't have one, please sign up / sign in to your Dashboard and create your token.

[Create your API token](https://slidepack.io/app)

### 1. Prepare your template and data

Input to SlidePack is a zip file that contains two things:

- `template.pptx` - A PowerPoint presentation with **\{placeholder}** s that will get replaced with the supplied data values.
  ![A minimal PowerPoint slide that says {title}](/en/images/quickstart-template.png)

- `data.json` - Data to populate the template with. For the above template, a minimal data.json looks like:
  ```json
  {
    "slides": [
      {
        "template": 1,
        "title": "Hello, World!"
      }
    ]
  }
  ```

Put these two files into a zip archive, and you are ready to start interacting with the API.

You can also download and try out one of the [recipes](/md/recipes/index.md).


### 2. Create a Session

A Session holds state for a single rendering session.

Request to create a session:

```shell
curl -X POST "https://slidepack.io/sessions" \
     -H 'Authorization: Bearer {API_TOKEN}'
```

Example data returned from POST /sessions:

```json
{
  "session": {
    "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
    "created_at": "2020-08-13T13:14:32.000000Z",
    "rendered_at": null,
    "render_succeeded": null,
    "render_slide_count": null,
    "render_message": null
  },
  "upload": {
    "action": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "acl": "private",
      "key": "sessions/zip/f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36.zip",
      "Content-Type": "application/zip",
      "X-Amz-Security-Token": "***",
      "X-Amz-Credential": "***",
      "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
      "X-Amz-Date": "20200813T131432Z",
      "Policy": "***",
      "X-Amz-Signature": "***"
    }
  }
}
```

The response includes parameters you need for the next step.


### 3. Upload input zip file

You'll be uploading your input zip file directly to SlidePack's S3 bucket.


Construct a POST request using values returned from the previous `POST /sessions` request.

- Enctype is `multipart/form-data`.
- POST URL should equal `upload.action`.
- All entries from `upload.params` should be included as form fields.
- `file` should be the last form field, pointing to your desired input file.

Example request to upload input file:

```shell
curl -X POST "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/" \
     -F "acl=private" \
     -F "key=sessions/zip/{uuid}.zip" \
     -F "Content-Type=application/zip" \
     -F "X-Amz-Security-Token=***" \
     -F "X-Amz-Credential=***" \
     -F "X-Amz-Algorithm=AWS4-HMAC-SHA256" \
     -F "X-Amz-Date=***" \
     -F "Policy=***" \
     -F "X-Amz-Signature=***" \
     -F "file=@/path/to/your/data.zip"
```

If successful, you'll get a `204 No Content` response.


### 4. Render and download the output

We request a render of this session by POSTing to `/render`:

Example request to render the output:

```shell
curl -X POST "https://slidepack.io/sessions/{uuid}/render" \
     -H 'Authorization: Bearer {API_TOKEN}'
```

Example render response:

```shell
{
  "session": {
    "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
    "created_at": "2020-08-13T13:14:32.000000Z",
    "rendered_at": "2020-08-13T13:16:18.000000Z",
    "render_succeeded": true,
    "render_slide_count": 5,
    "render_message": null
  },
  "download_url": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/..."
}
```

Access the `download_url` to retrieve your rendered output file:

```shell
curl "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/..." -o output.pptx
```

If you used the minimal example, this is what your output will look like:

![Render output](/en/images/quickstart-output.png)


### Next steps

- [Learn more about composing templates and data](/md/guides/template-and-data.md)
- [Browse the recipes to get an idea of what's possible with SlidePack](/md/recipes/index.md)
- [See the API endpoints reference](/md/reference/endpoints.md)
- [Take a look at code samples](https://github.com/qitar/slidepack-examples)


--------------------------------------------------

<!-- /md/guides/template-and-data.md -->


# Template and Data

SlidePack requires a zip archive as input. It consists of a template (in PPTX format), data (in JSON format),
and optionally, additional assets such as images.

```
input.zip
├─ template.pptx   (required)
├─ data.json       (required)
├─ :
└─ :               (optional images, etc.)
```

### template.pptx

The template is much like a Pug or Mustache template (if you are familiar with those), except in PowerPoint's PPTX format.
This file should always be named `template.pptx`.

Template slides can contain placeholders indicated by **\{key}**.
Placeholders are replaced with values from your `data.json` that has the matching object **key**.

**template.pptx**

![template.pptx slide 1](/en/images/template-slide-1.png)
![template.pptx slide 2](/en/images/template-slide-2.png)

Different types of objects have specific ways of marking the target elements.

* **Text and bullet lists:** Occurrences of **\{key}** are replaced with the supplied string value.
* **Tables and charts:** Tables and charts with **alt text** matching the **key** are populated with the supplied data.
* **Images and videos:** SlidePack replaces shapes that contain **\{key}** with the supplied image or video.


### data.json

`data.json` holds the data to populate the template with, and also defines the composition of your output PPTX. This file should always be named `data.json`.

data.json:

```json
{
  "slides": [
    {
      "template": 1,
      "some_text": {
        "type": "text",
        "value": "Text to place"
      },
      "more_text": {
        "type": "text",
        "value": "More text to place"
      }
    },
    {
      "template": 2,
      "my_image": {
        "type": "image",
        "src": "pics/client_logo.png"
      }
    },
    {
      "template": 2,
      "my_image": {
        "type": "image",
        "src": "pics/our_logo.png"
      }
    }
  ]
}
```

The [top-level](/md/reference/data-json.md#root) `slides` array defines the list of slides that should compose the generated output.
In this example, the output will have three slides in total: one slide based on template slide no.1, followed by two slides based on template slide no.2.

Each [slide object](/md/reference/data-json.md#slide) requires a `"template":` number, designating which template slide to use.
This is followed by key-value entries that provide data objects for each **key** in the template slide.

Data objects include a `type` property to signify what kind of object it represents (e.g. `text`, `image`)
followed by data content and additional options.
For a comprehensive list of supported objects, along with their required properties and options, see the [data.json reference](/md/reference/data-json.md).

### Authoring tips

* Text and shape styles (like font size, colors) used in the template are kept for your output, but you can override some of them by specifying options in your `data.json`.
* SlidePack requires valid JSON - make sure there are no trailing commas in lists and objects.


--------------------------------------------------

<!-- /md/guides/limits.md -->


# API Limits

### Plan rendering limits

Usage is subject to your [plan quota](https://slidepack.io/en/pricing),
defined by the number of rendered slides during the current billing cycle.
Requests that try to render slides past your plan quota will count towards your pay-as-you-go billing.

<Note>
You will never be charged if you are on the Free plan. Once you reach your 50 slides per month limit,
you will not be able to request any more renders.
</Note>

You can check your usage and limits in your [Dashboard > Billing](https://slidepack.io/app/billing).

### Other usage limitations

| Title | Limit | Notes |
|-------|-------|-------|
| Rate limit | 600 requests/minute | |
| Session expires in | 24 hours | Only one unrendered session is kept at a time regardless of this expiry. |
| Zip upload max size | 50MB | |
| Upload URL expires in | 60 minutes | Can be reissued as long as the session hasn't expired. |
| Download URL expires in | 5 minutes | Can be reissued as long as the session hasn't expired. |


--------------------------------------------------

<!-- /md/guides/excel.md -->


# Render from Excel

This feature lets you use SlidePack easily with a combination of PowerPoint templates and Excel data, without any coding required.
Uploading different Excel data files to a single template will let you generate similar slide decks quickly.

<Note>
Template format differs from the API.
</Note>

### Usage

Create a PowerPoint presentation to use as a template, and upload it at
[Render from Excel](https://slidepack.io/app/excel) in your SlidePack Dashboard.
Then create and upload an Excel file that holds the desired data values.
This will generate a new PowerPoint file with your data embedded, ready for download.

### Creating your template and data files

Insert placeholders in your PowerPoint template that refer to Excel cell coordinates, such as `{A1}` or `{B5}`.
Make sure those cells in your Excel file have the desired values.

![Render from Excel overview](/en/images/excel/overview.png)

See below for a detailed description of all supported syntax and features.

---------------------------------------------------------------------


## Placing text {{ id: 'text' }}

### PowerPoint template

Insert placeholders that refer to Excel cell coordinates you want to pull values from, surrounded by curly braces. For example: `{B5}`.

**template.pptx**

![template.pptx slide 1](/en/images/excel/text-template.png)

### Excel workbook

Place desired values in the cells you referred to.

![data xlsx](/en/images/excel/text-data.png)

### Render result

**output.pptx**

![output.pptx slide 1](/en/images/excel/text-output.png)


## Placing text from a specific worksheet {{ id: 'text-from-sheet' }}

### PowerPoint template

Insert placeholders that refer to the Excel worksheet name and cell coordinates, surrounded by curly braces, For example: `{SheetName:B5}`.

For example, if you want to get the value of cell C5 in the worksheet named "summary", you would write `{summary:C5}`.

**template.pptx**

![template.pptx slide 1](/en/images/excel/sheet-template.png)

Note that you can omit the worksheet name for the first sheet. In this example, `{A1}` and `{data:A1}` are equivalent.

### Excel data

Fill the cells you referred to with the desired values.

![data xlsx](/en/images/excel/sheet-data.png)

### Render result

**output.pptx**

![output.pptx slide 1](/en/images/excel/sheet-output.png)


## Populating tables {{ id: 'table' }}

### PowerPoint template

Insert a table and set a table name as its alt text.
The table name can be anything you like, but should start with `<table>`. For example, `<table>songs`.

(Right-click a table in PowerPoint and select **View alt text** to edit the alt text.)

**template.pptx**

![template.pptx slide 1](/en/images/excel/table-template.png)

### Excel workbook

Create a new worksheet and fill it with the table data. The worksheet name should be the same as the table name (alt text).

![data xlsx](/en/images/excel/table-data.png)

### Render result

The number of rows and columns in the table will be adjusted to accommodate the data.

**output.pptx**

![output.pptx slide 1](/en/images/excel/table-output.png)


## Populating charts {{ id: 'chart' }}

### PowerPoint template

Insert a chart and set a chart name as its alt text.
The chart name can be anything you like, but should start with `<chart>`. For example, `<chart>sales`.

(Right-click a chart in PowerPoint and select **Edit alt text** to edit the alt text.)

**template.pptx**

![template.pptx slide 1](/en/images/excel/chart-template.png)

Chart values do not matter — they will be overwritten by the Excel data.

### Excel workbook

Create a new worksheet and fill it with the chart data. The worksheet name should be the same as the chart name (alt text).

Categories should be in column A. Series names should be in row 1.

Series with corresponding names in the template will be overwritten. New series will be added.

![data xlsx](/en/images/excel/chart-data.png)

### Render results

The number of series in the chart will be adjusted to accommodate the data. Colors for newly added series will be set automatically by PowerPoint.

**output.pptx**

![output.pptx slide 1](/en/images/excel/chart-output.png)


## Placing images and videos {{ id: 'image' }}

### PowerPoint template

Place a shape where you want your image or video to be.
In it, insert text that refers to Excel cell coordinates, surrounded by curly braces. For example: `{B5}`.

You can optionally specify a worksheet name, like `{Sheet3:B5}`.

**template.pptx**

![template.pptx slide 1](/en/images/excel/image-template.png)

### Excel workbook

In the cell you referred to, place a URL to your image, prefixed with `<image>`.
For example: `<image>https://source.unsplash.com/tG36rvCeqng/720x480`.
Supported formats are `jpg`, `jpeg`, `gif`, and `png`.

For videos, use `<video>` followed by a YouTube URL.
For example: `<video>https://www.youtube.com/watch?v=fIlJyZEbrzo`.

![data xlsx](/en/images/excel/image-data.png)

<Note>
The Render from Excel feature only supports images and videos that are publicly available through a URL.
For videos, YouTube is currently the only supported video host.
[Use the API to upload and embed private files](/md/reference/data-json.md#image).
</Note>

### Render results

The shape will be replaced by the image or video.

**output.pptx**

![output.pptx slide 1](/en/images/excel/image-output.png)


---------------------------------------------------------------------

## Notes {{ id: 'caution' }}

* The number of slides generated counts towards your rendering limit. See [API limits](/md/guides/limits.md) for details.
* Render results expire in 24 hours and will no longer be available for download. Please re-render if necessary.


--------------------------------------------------

<!-- /md/reference/endpoints.md -->


# API Endpoints Reference

This is a list of all SlidePack HTTP API Endpoints.

## Authentication {{ id: 'authentication' }}

All endpoints require authentication. Include your API token in the request header to authenticate. 

Example request with authentication:

```shell
curl "https://slidepack.io/sessions" \
  -H "Authorization: Bearer {API_TOKEN}"
```

You can create your API token in your [Dashboard](https://slidepack.io/app).

[A JSON Schema of API responses is available here.](/schemas/api.json)

---------------------------------------------------------------------


## Create a Session {{ id: 'post-sessions', tag: 'POST', label: '/sessions' }}

Creates a Session and provides AWS S3 Pre-Signed POST parameters that you will need to upload your zip file.

<Note>
  When creating a new Session, any existing Sessions that haven't been rendered yet are deleted.
</Note>

<Note>
  All Sessions expire 24 hours after creation, including ones that have been rendered.
</Note>

### Response


**Request: POST /sessions**

```shell
curl -X POST "https://slidepack.io/sessions" \
        -H 'Authorization: Bearer {API_TOKEN}'
```

**Response: 201 Created**

```json
{
    "session": {
      "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
      "created_at": "2020-08-13T13:14:32.000000Z",
      "rendered_at": null,
      "render_succeeded": null,
      "render_slide_count": null,
      "render_message": null
    },
    "upload": {
      "action": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com",
      "method": "POST",
      "enctype": "multipart/form-data",
      "params": {
        "acl": "private",
        "key": "sessions/zip/f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36.zip",
        "Content-Type": "application/zip",
        "X-Amz-Security-Token": "***",
        "X-Amz-Credential": "***",
        "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
        "X-Amz-Date": "20200813T131432Z",
        "Policy": "***",
        "X-Amz-Signature": "***"
      }
    }
  }
```


---------------------------------------------------------------------


## List Sessions {{ id: 'get-sessions', tag: 'GET', label: '/sessions' }}

Retrieves a list of Sessions.

### Response

- **`sessions`** (object[]): Array of [Session object](#session-object) summary subsets.
**Request: GET /sessions**

```shell
curl "https://slidepack.io/sessions" \
      -H 'Authorization: Bearer {API_TOKEN}'
```

**Response: 200 OK**

```json
{
    "sessions": [
      {
        "uuid": "805bcdc8-4782-4673-9d69-47f7ed0696c8",
        "created_at": "2020-08-13T15:10:15.000000Z",
        "rendered_at": "2020-08-13T15:10:20.000000Z",
        "render_succeeded": true,
      },
      {
        "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
        "created_at": "2020-08-13T13:14:32.000000Z",
        "rendered_at": null,
        "render_succeeded": null,
      }
    ]
  }
```


---------------------------------------------------------------------


## Retrieve a Session {{ id: 'get-session', tag: 'GET', label: '/sessions/{uuid}' }}

Retrieves detailed information about a Session.

### Response

- **`session`** (object): The [Session object](#session-object).
- **`upload`** (object): Parameters for [uploading the input zip file](#upload).
**Request: GET /sessions/{uuid}**

```shell
curl "https://slidepack.io/sessions/{uuid}" \
      -H 'Authorization: Bearer {API_TOKEN}'
```

**Response: 200 OK**

```json
{
    "session": {
      "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
      "created_at": "2020-08-13T13:14:32.000000Z",
      "rendered_at": null,
      "render_succeeded": null,
      "render_slide_count": null,
      "render_message": null
    },
    "upload": {
      "action": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com",
      "method": "POST",
      "enctype": "multipart/form-data",
      "params": {
        "acl": "private",
        "key": "sessions/zip/f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36.zip",
        "Content-Type": "application/zip",
        "X-Amz-Security-Token": "***",
        "X-Amz-Credential": "***",
        "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
        "X-Amz-Date": "20200813T131432Z",
        "Policy": "***",
        "X-Amz-Signature": "***"
      }
    }
  }
```


---------------------------------------------------------------------


## Upload zip file {{ id: 'upload', tag: 'POST', label: 'variable url' }}

Uploads a zip file for a Session to be used for rendering.
The upload request goes directly to our private Amazon S3 bucket using pre-signed parameters. 

The input zip file must contain at least two files:
- `template.pptx` - The template PPTX file.
- `data.json` - Data to populate the template with.

It may also contain images and videos to embed. The zip file can be named anything you like.

Construct a `multipart/form-data` request so that:
- The **URL** is `upload.action` from [POST /sessions](#post-sessions).
- All key-value pairs from `upload.params` from [POST /sessions](#post-sessions) are included as **parameters (form fields)**.
- Append a **`file` field** at the end that points to your desired input file.

<Note>
  Form-data parameters expire 1 hour after being issued. Send another request to [GET /sessions/\{uuid\}](#get-session) to get a fresh set of parameters.
</Note>

### Response

`204 No Content`
**Request: POST Dynamic URL**

```shell
curl -X POST "{URL}" \
    -F "{KEY}={VALUE}" \
    -F "{KEY}={VALUE}" \
       ...
    -F "file=@{ZIP_FILE_PATH}"
```
```shell
curl -X POST "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/" \
      -F "acl=private" \
      -F "key=sessions/zip/{uuid}.zip" \
      -F "Content-Type=application/zip" \
      -F "X-Amz-Security-Token=***" \
      -F "X-Amz-Credential=***" \
      -F "X-Amz-Algorithm=AWS4-HMAC-SHA256" \
      -F "X-Amz-Date=***" \
      -F "Policy=***" \
      -F "X-Amz-Signature=***" \
      -F "file=@/path/to/your/data.zip"
```

**Response: 204 No Content**

```json

```


---------------------------------------------------------------------


## Render {{ id: 'render', tag: 'POST', label: '/sessions/{uuid}/render' }}

Renders your session into an output pptx file and returns the download URL.

Replace `{uuid}` with your session uuid.

You need to have [uploaded your input zip file](#upload) for your session beforehand.

### Response

- **`session`** (object): The [Session object](#session-object).
- **`download_url`** (string): Download URL for your rendered PPTX file.

<Note>
  The download URL expires after 5 minutes. Send a request to [POST /sessions/\{uuid\}/download_url](#reissue-download-url) to get a fresh download URL.
</Note>
**Request: POST /sessions/{uuid}/render**

```shell
curl -X POST "https://slidepack.io/sessions/{uuid}/render" \
       -H 'Authorization: Bearer {API_TOKEN}'
```

**Response: 200 OK**

```json
{
    "session": {
      "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
      "created_at": "2020-08-13T13:14:32.000000Z",
      "rendered_at": "2020-08-13T13:16:18.000000Z",
      "render_succeeded": true,
      "render_slide_count": 5,
      "render_message": null
    },
    "download_url": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/..."
  }
```


---------------------------------------------------------------------


## Re-issue download URL {{ id: 'reissue-download-url', tag: 'POST', label: '/sessions/{uuid}/download_url' }}

Issues a fresh download URL for your rendered output file.

Replace `{uuid}` with your session uuid.

You need to have [rendered your session](#render) beforehand.

### Response

- **`session`** (object): The [Session object](#session-object).
- **`download_url`** (string): Download URL for your rendered PPTX file.

<Note>
  The download URL expires after 5 minutes. Use this endpoint again to get a fresh download URL.
</Note>
**Request: POST /sessions/{uuid}/download_url**

```shell
curl -X POST "https://slidepack.io/sessions/{uuid}/download_url" \
       -H 'Authorization: Bearer {API_TOKEN}'
```

**Response: 200 OK**

```json
{
    "session": {
      "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
      "created_at": "2020-08-13T13:14:32.000000Z",
      "rendered_at": "2020-08-13T13:16:18.000000Z",
      "render_succeeded": true,
      "render_slide_count": 5,
      "render_message": null
    },
    "download_url": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/..."
  }
```


---------------------------------------------------------------------


## The Session object {{ id: 'session-object' }}

- **`uuid`** (string): Unique identifier for the object.
- **`created_at`** (string): Creation timestamp.
- **`rendered_at`** (string or null): Rendered timestamp. `null` if session has not been rendered yet.
- **`render_succeeded`** (boolean or null): `true` if render was successful, `false` if not.  `null` if session has not been rendered yet.
- **`render_slide_count`** (integer or null): Number of slides rendered if render was successful.  `null` if session has not been rendered yet.
- **`render_message`** (string or null): Error message if render was unsuccessful.  `null` if session has not been rendered yet, or render was successful.

The Session object:
```json
{
  "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
  "created_at": "2020-08-13T13:14:32.000000Z",
  "rendered_at": "2020-08-13T14:16:20.000000Z",
  "render_succeeded": true,
  "render_slide_count": 5,
  "render_message": null
}
```


--------------------------------------------------

<!-- /md/reference/data-json.md -->


# data.json Reference

`data.json` defines what data to populate a PowerPoint template with, and is one of the required elements of SlidePack's input zip file.

This page is a reference of different types of objects that you can use in `data.json`.
For more concrete examples of how to use them, please refer to [Recipes](/md/recipes/index.md).

[A JSON Schema of the data.json file is available here.](/schemas/data-json.json)

---------------------------------------------------------------------


## The root object {{ id: 'root' }}

This is how the `data.json` top level object should be shaped.

### Attributes

- **`slides`** (object[]) (required): An array of [Slide objects](#slide). Each will result in a single slide in the output PPTX. Multiple Slide objects may point to the same template slide number, in which case that template slide will be reused multiple times.
- **`theme`** (object): A [Theme object](#theme) that applies to the whole PPTX presentation.

<Note>
  Older versions of the API accepted JSON with the slides array at root. This format is still supported, but is scheduled to be deprecated in the next version.
</Note>

The data.json root object:
```json
{
  "slides": [
    {
      "template": 1,
      "some_text": "Text to place"
    },
    {
      "template": 2,
      "some_table": {
        "type": "table",
        "rows": [
          ["this", "is", "header"],
          ["this", "is", "first row"]
        ]
      }
    }
  ],
  "theme": {
    "colors": {
      "dk1": "#6c685f",
      "lt1": "#f5f2e3"
    }
  }
}
```


---------------------------------------------------------------------


## The Slide object {{ id: 'slide' }}

Each Slide object will result in a single slide in the rendered pptx file.

A Slide object is a mapping of placeholder keys to item data.

For each key, SlidePack will look for a corresponding
placeholder in the slide and try to fill it with the provided value.

The `template` key is required and specifies which slide in the template PowerPoint
should be used as the template for this slide.

### Attributes

- **`template`** (integer) (required): The template slide number to use.

The Slide object:
```json
{
  "template": 1,
  "my_text": "Text to place",
  "more_text": {
    "type": "text",
    "value": "More text to place",
    "hyperlink": "https://slidepack.io/"
  },
  "my_table": {
    "type": "table",
    "rows": [
      ["This", "is", "the header"],
      ["This", "is", "the first row"]
    ]
  }
}
```


---------------------------------------------------------------------


## The Text object {{ id: 'text' }}

The Text object is used to represent a piece of text.

It can be used:
- To replace **\{placeholders\}** in text boxes with the provided value.
- To place text in a [table](#table) cell.
- As a [list](#list) item.

### String shorthand

You can use a plain string in place of a Text object when no additional options are needed.

```json
"my_text": "Lorem ipsum dolor sit amet."
```
is equivalent to:
```json
"my_text": {
  "type": "text",
  "value": "Lorem ipsum dolor sit amet."
}
```

### Attributes 

- **`type`** (string "text") (required): 
- **`value`** (string) (required): The text content value.
- **`styles`** (object): A [Styles object](#styles). Specified values will be used to override existing styles.  `styles.font` applies to the text value. `styles.shape` applies to the containing shape.
- **`hyperlink`** (string): The text will link to this URL if specified.
- **`level`** (integer): Indent level of this text block within a list. Minimum is `0` (default), maximum is `8`. Only applicable if this Text object is part of a [List object](#list).

The Text object (minimum example):
```json
"my_placeholder": {
  "type": "text",
  "value": "Lorem ipsum dolor sit amet."
}
```

The Text object (with more options):

```json
"my_placeholder": {
  "type": "text",
  "value": "Lorem ipsum dolor sit amet.",
  "styles": {
    "font": {
      "size": 28,
      "color": "#000000",
      "underline": true,
      "italic": true
    },
    "shape": {
      "fill": "#E2E9F4",
      "outline": "758AA5",
      "align": "center",
      "vertical_align": "top"
    }
  },
  "hyperlink": "https://slidepack.io/"
}
```


---------------------------------------------------------------------


## The Table object {{ id: 'table' }}

The Table object is used to populate a table with tabular data.

SlidePack will look for tables that have the key as its **alt text**.
In PowerPoint, right click on a table and select **View alt text** to change a table's alt text.

Each cell value may be a [Text object](#text) or a string shorthand.

Columns and rows will be added or removed to match the dimensions of the provided array.

### Attributes 

- **`type`** (string "table") (required): 
- **`rows`** (string[][] or object[][]) (required): 2-dimensional array of cell values. Cell values may be a mixture of [Text objects](#text) and string shorthands.
- **`rows[n][m]`** (string or object): Cell value at row n, column m.
- **`rows[n][m].databar`** (object): A data bar will be drawn in the cell if specified.
- **`rows[n][m].databar.ratio`** (number): Length of the data bar, within range `0.0` to `1.0`.
- **`rows[n][m].databar.color`** (string): [Color](#colors) of the data bar.
- **`horizontal_sizing`** (string enum): Specifies how the table resizes horizontally when columns are added or removed. - `fixed` (default) - Keep the original table width. Column widths are adjusted to fit. - `anchor_left` - Keep the left side of the table in place. Table resizes to the right if necessary. - `anchor_right` - Keep the right side of the table in place. Table resizes to the left if necessary.
- **`vertical_sizing`** (string enum): Specifies how the table resizes vertically when rows are added or removed. - `fixed` - Keep the original table height. Row heights are adjusted to fit. - `anchor_top` (default) - Keep the top side of the table in place. Table resizes downwards if necessary. - `anchor_bottom` - Keep the bottom side of the table in place. Table resizes upwards if necessary.

The Table object (minimum example):
```json
"my_table_alt_text": {
  "type": "table",
  "rows": [
    ["Title", "Artist", "Album"],
    ["So What", "Miles Davis", "Kind of Blue"],
    ["Take Five", "Dave Brubeck", "Time Out"]
  ]
}
```

The Table object (with more options):

```json
"my_table_alt_text": {
  "type": "table",
  "rows": [
    ["Title", "Artist", "Album"],
    [
      {
        "type": "text",
        "value": "So What",
        "styles": {
          "font": {
            "bold": true
          },
          "shape": {
            "align": "justified"
          }
        }
      },
      { "type": "text", "value": "Miles Davis" },
      { "type": "text", "value": "Kind of Blue" }
    ],
    [
      { "type": "text", "value": "Take Five" },
      { "type": "text", "value": "Dave Brubeck" },
      { "type": "text", "value": "Time Out" }
    ]
  ],
  "horizontal_sizing": "fixed",
  "vertical_sizing": "anchor_top"
}
```


---------------------------------------------------------------------


## The Chart object {{ id: 'chart' }}

The Chart object is used to populate a chart with series data.

Currently supported chart types are Bar, Line, Area and Pie.

<Note>
  [Scatter charts](#scatter-chart) are also supported, but the data format is slightly different.
</Note>

SlidePack will look for charts that have the key as its **alt text**.
In PowerPoint, right click on a chart and select **View alt text** to change a chart's alt text.

### Attributes 

- **`type`** (string "chart") (required): 
- **`labels`** (string[]): Array of strings that are displayed as category labels. These are usually displayed on the horizontal axis.
- **`labels_interval`** (integer): Display interval of string category labels. For example, `3` would mean one in every three of `labels` are actually displayed, and the rest are skipped.
- **`date_labels`** (integer[]): Array of numerical values that are displayed as category labels. Specify this instead of `labels` to use the "Date axis" format. Values are Excel date values: integers that denote the number of days since Jan 1, 1900. For example, November 11, 2022 is `44881`.
- **`date_labels_format`** (string): Format code for date axis category labels. An example is `"yyyy/mm/dd"`. Refer to [MS Office documents](https://support.microsoft.com/en-us/Search/results?query=excel+format+numbers+as+dates) for format code details.
- **`date_labels_major_unit`** (integer): Display interval of date axis category labels. Combine with `date_labels_major_time_unit`. For example, `2` and `"months"` means an interval of 2 months.
- **`date_labels_major_time_unit`** (string enum): One of `"days"`, `"months"`, or `"years"`.
- **`axis1`** (object) (required): Data for the primary value axis.
- **`axis1.series`** (object) (required): Map of series keys to series data objects.
- **`axis1.series.{key}`** (object): Series data. If the key exists as a series name in the template chart, that series will be overwritten. Otherwise, a new series will be created.
- **`axis1.series.{key}.name`** (string) (required): New name for the series. This name may appear, for example, in the chart legend.
- **`axis1.series.{key}.values`** (number[]) (required): Array of series data point values.
- **`axis1.series.{key}.styles`** (object): A [Styles object](#styles) for the whole series.
- **`axis1.series.{key}.data_point_styles`** (object[]): Array of [Styles objects](#styles) for individual data points. Each styles object applies to the data point in the same position in the `values` array. Use `null` elements to keep default styles.
- **`axis1.bounds`** (object): Display range of the value axis.
- **`axis1.bounds.minimum`** (number): Minimum display value of the axis.
- **`axis1.bounds.maximum`** (number): Maximum display value of the axis.
- **`axis1.format`** (string): Format code for value axis labels. Examples are `"0.0%"` and `"#,#0.0"`. Refer to [MS Office documents](https://support.microsoft.com/en-US/search/results?query=excel+number+format+code) for format code details.
- **`axis1.major_unit`** (number): Display interval of value axis labels.
- **`axis2`** (object): Data for the secondary value axis. Schema is identical to `axis1`.

### Effects of styles and data_point_styles

|            | `shape.fill` | `shape.outline`               |
| ---------- | ------------ | ----------------------------- |
| Bar chart  | Bar fill     | Bar outline                   |
| Line chart | Marker fill  | Plot line and marker outline   |
| Area chart | Area fill    | Area outline                  |

The Chart object (minimum example):
```json
"my_chart_alt_text": {
  "type": "chart",
  "labels": ["Q1", "Q2", "Q3", "Q4"],
  "axis1": {
    "series": {
      "my_series_key": {
        "name": "Revenue",
        "values": [100, 130, 120, 130]
      }
    }
  }
}
```

The Chart object (with more options):

```json
"my_chart_alt_text": {
  "type": "chart",
  "labels": ["Q1", "Q2", "Q3", "Q4"],
  "labels_interval": 2,
  "axis1": {
    "bounds": {
      "minimum": 50,
      "maximum": 150
    },
    "format": "#,#.0",
    "interval": 20,
    "series": {
      "ser1": {
        "name": "Revenue",
        "values": [100, 130, 120, 130]
      },
      "ser2": {
        "name": "Expenses",
        "values": [85, 90, 80, 75]
      }
    }
  },
  "axis2": {
    "series": {
      "ser3": {
        "name": "Gross profit margin",
        "values": [0.15, 0.3, 0.33, 0.42],
        "styles": {
          "shape": { "fill": "ffdd99", "outline": "ffaa55" }
        },
        "data_point_styles": [
          null,
          null,
          { "shape": { "fill": "ff0000" } },
          null
        ]
      }
    }
  }
}
```


---------------------------------------------------------------------


## The Scatter Chart object {{ id: 'scatter-chart' }}

The Scatter Chart object is used to populate a scatter chart with series data.

SlidePack will look for charts that have the key as its **alt text**.
In PowerPoint, right click on a chart and select **View alt text** to change a chart's alt text.

### Attributes 

- **`type`** (string "scatter-chart") (required): 
- **`axis1`** (object) (required): Data for the primary axis.
- **`axis1.series`** (object) (required): Map of series keys to series data objects.
- **`axis1.series.{key}`** (object): Series data. If the key exists as a series name in the template chart, that series will be overwritten. Otherwise, a new series will be created.
- **`axis1.series.{key}.name`** (string) (required): New name for the series. This name may appear, for example, in the chart legend.
- **`axis1.series.{key}.values`** ([number, number][]) (required): Array of series data point values. Each element is a tuple `[x, y]` that represents a data point.
- **`axis1.series.{key}.styles`** (object): A [Styles object](#styles) for the whole series.
- **`axis1.series.{key}.data_point_styles`** (object[]): Array of [Styles objects](#styles) for individual data points. Each styles object applies to the data point in the same position in the `values` array. Use `null` elements to keep default styles.
- **`axis1.x_bounds`** (object): Display range of the X axis.
- **`axis1.x_bounds.minimum`** (number): Minimum display value of the X axis.
- **`axis1.x_bounds.maximum`** (number): Maximum display value of the X axis.
- **`axis1.x_format`** (string): Format code for the X axis labels. Examples are `0.0%` and `#,#0.0`. Refer to [MS Office documents](https://support.microsoft.com/en-US/search/results?query=excel+number+format+code) for format code details.
- **`axis1.x_major_unit`** (number): Display interval of labels of the X axis labels.
- **`axis1.y_bounds`** (object): Display range of the Y axis.
- **`axis1.y_bounds.minimum`** (number): Minimum display value of the Y axis.
- **`axis1.y_bounds.maximum`** (number): Maximum display value of the Y axis.
- **`axis1.y_format`** (string): Format code for the Y axis labels. Examples are `0.0%` and `#,#0.0`. Refer to [MS Office documents](https://support.microsoft.com/en-US/search/results?query=excel+number+format+code) for format code details.
- **`axis1.y_major_unit`** (number): Display interval of labels of the Y axis labels.
- **`axis2`** (object): Data for the secondary value axis data. Schema is identical to `axis1`.

The Scatter chart object (minimum example):
```json
"my_scatter_chart_alt_text": {
  "type": "scatter-chart",
  "axis1": {
    "series": {
      "my_series_key": {
        "name": "Occurrences",
        "values": [
          [7.1, 5.1],
          [3.4, 6.9],
          [2.6, 2.6],
          [4.0, 8.1],
          [2.8, 4.5]
        ]
      }
    }
  }
}
```

The Chart object (with more options):

```json
"my_scatter_chart_alt_text": {
  "type": "scatter-chart",
  "axis1": {
    "x_bounds": { "minimum": 0, "maximum": 10 },
    "x_format": "#,#0.00",
    "x_major_unit": 1.0,
    "y_bounds": { "minimum": 0, "maximum": 10 },
    "series": {
      "my_series_one": {
        "name": "Natural",
        "values": [
          [7.1, 5.1],
          [3.4, 6.9],
          [2.6, 2.6],
          [4.0, 8.1],
          [2.8, 4.5]
        ]
      }
    }
  },
  "axis2": {
    "series": {
      "my_series_two": {
        "name": "Synthetic",
        "values": [
          [4.6, 5.3],
          [5.2, 3.6],
          [6.0, 2.8],
          [6.3, 6.5],
          [8.2, 4.4]
        ],
        "styles": {
          "shape": { "fill": "ffdd99", "outline": "ffaa55" }
        },
        "data_point_styles": [
          null,
          null,
          { "shape": { "fill": "ff0000" } },
          null,
          null
        ]
      }
    }
  }
}
```


---------------------------------------------------------------------


## The List object {{ id: 'list' }}

The List object is used to populate a list with list items.

SlidePack will look for **\{placeholders\}** in text boxes and replace it with a list.

Each item in the `values` array should be a [Text object](#text) or a string.

Specify [`values[n].level`](#text) to set the indent level of each item
The minimum (default) indent level is 0 and maximum is 8.

`values[n].styles.font` can be used to change font styles, but `values[n].styles.shape` is ignored.

### Attributes 

- **`type`** (string "list") (required): 
- **`values`** (string[] or object[]) (required): List items. May be a mixture of [Text objects](#text) and string shorthands.

The List object (minimum example):
```json
"my-list-placeholder": {
  "type": "list",
  "values": [
    "Lorem ipsum dolor sit amet",
    "consectetur adipiscing elit",
    "Sed mollis pretium"
  ]
}
```

The List object (with more options):

```json
"my-list-placeholder": {
  "type": "list",
  "values": [
    {
      "value": "Lorem ipsum dolor sit amet",
      "level": 1
    },
    {
      "value": "consectetur adipiscing elit",
      "level": 2
    },
    {
      "value": "Sed mollis pretium",
      "level": 2,
      "styles": {
        "font": {
          "bold": true,
          "color": "#2a4598"
        }
      }
    }
  ]
}
```


---------------------------------------------------------------------


## The Image object {{ id: 'image' }}

The Image object is used to embed an image.

SlidePack will look for **\{placeholders\}** in shapes and replace it with an image.


### Attributes 

- **`type`** (string "image") (required): 
- **`src`** (string) (required): Include your image file in the zip archive, and specify the relative path from the directory `data.json` is in. Supported image formats are `jpg`, `jpeg`, `gif`, and `png`.
- **`scaling`** (string enum): Specifies how the image should be scaled. - `none` (default) - Use the image intrinsic size. - `contain` - Scale so that the entire image fits within the target shape. - `cover` - Scale so that the image fills the target shape. Image may overflow.
- **`overflow`** (string enum): Specifies how overflow should be treated. - `visible` (default) - Image is not clipped, and may overflow the target shape. - `hidden` - Image is clipped at the target shape bounds.

The Image object:
```json
  "my-image-placeholder": {
    "type": "image",
    "src": "images/home-office.jpg",
    "scaling": "contain",
    "overflow": "hidden"
  }
```


---------------------------------------------------------------------


## The Video object {{ id: 'video' }}

The Video object is used to embed a video.

SlidePack will look for **\{placeholders\}** in shapes and replace it with a video.

Video may be unplayable if it uses a codec that PowerPoint does not support.
Microsoft recommends H.264 video and AAC audio.

### Attributes 

- **`type`** (string "video") (required): 
- **`src`** (string) (required): A local video file path or a YouTube URL. For local videos, include your video file in the zip archive, and specify the relative path from the directory `data.json` is in. Supported file formats are `mp4`, `m4v`, and `mov`.
- **`thumbnail`** (string): Picture to be shown when video is not playing. Required for local video files. Needs to have the same aspect ratio as the video itself. Include your image file in the zip archive, and specify the relative path from the directory `data.json` is in. Supported file formats are `jpg`, `jpeg`, `png` and `gif`.
- **`scaling`** (string enum): Specifies how the video should be scaled. - `contain` (default) - Scale so that the entire video fits within the target shape. - `cover` - Scale so that the video fills the target shape. Video may overflow.

The Video object:
```json
  "my-video-placeholder": {
    "type": "video",
    "src": "demo-reel.mp4",
    "thumbnail": "thumb.png",
    "scaling": "contain"
  }
```


---------------------------------------------------------------------


## The Styles object {{ id: 'styles' }}

The Styles object is used to apply colors and font styles to objects.

The effects vary depending on what type of object the styles are being applied to.
For example, when applied to a [Text object](#text), `shape.outline` changes the outline color of the shape that the text is in.
When applied to a bar [Chart](#chart) series, it changes the outline color of the bars.

Some properties do not have an effect when applied to a certain type of object.
For example, `shape.align` is ignored for a chart data point.

See reference entries for each object type and the recipes for details.

### Attributes 

- **`font`** (object): Font styles.
- **`font.typeface`** (string): Changes the text font typeface. Examples are `"Arial"` and `"Calibri"`.
- **`font.size`** (number): Changes the text font size, in points.
- **`font.color`** (string): Changes the text [color](#colors).
- **`font.underline`** (boolean): Applies underline.
- **`font.bold`** (boolean): Applies **bold**.
- **`font.italic`** (boolean): Applies *italic*.
- **`font.strike`** (boolean): Applies ~~strike-through~~.
- **`shape`** (object): Shape styles.
- **`shape.outline`** (string): Changes the shape outline [color](#colors).
- **`shape.fill`** (string): Changes the shape fill [color](#colors).
- **`shape.align`** (string enum): Changes the horizontal alignment of text within the shape. One of `left`, `center`, `right`, `justified` or `distributed`.
- **`shape.vertical_align`** (string enum): Changes the vertical alignment of text within the shape. One of `top`, `center` or `bottom`.

Text object with Styles:
```json
"my-text-placeholder": {
  "type": "text",
  "value": "Lorem ipsum dolor sit amet",
  "styles": {
    "font": {
      "typeface": "Times New Roman",
      "size": 28,
      "color": "#000000",
      "underline": true,
      "italic": true,
      "bold": true,
      "strike": true
    },
    "shape": {
      "outline": "accent1",
      "fill": "lavender",
      "align": "center",
      "vertical_align": "bottom"
    }
  }
}
```


---------------------------------------------------------------------


## The Theme object {{ id: 'theme' }}

The Theme object is used to change theme colors that apply to all slides in the presentation.

A PowerPoint theme has 12 named colors:

![Theme colors](/en/images/theme-colors.png)

You can specify each of them with a [Color](#colors) string.

<Note>
  Use hex codes such as `"#ff0000"` or color names such as `"snow"`.
  Theme color names such as `"dk1"` cannot be used to define theme colors.
</Note>

Unspecified colors and ones set to empty strings `""` or `null` retain their original colors.

### Attributes 

- **`colors`** (object): Color values.
- **`colors.lt1`** (string): Color for "Text/Background - Light 1". This is usually the slide background.
- **`colors.dk1`** (string): Color for "Text/Background - Dark 1". This is usually the text color.
- **`colors.lt2`** (string): Color for "Text/Background - Light 2".
- **`colors.dk2`** (string): Color for "Text/Background - Dark 2".
- **`colors.accent1`** (string): Color for "Accent 1".
- **`colors.accent2`** (string): Color for "Accent 2".
- **`colors.accent3`** (string): Color for "Accent 3".
- **`colors.accent4`** (string): Color for "Accent 4".
- **`colors.accent5`** (string): Color for "Accent 5".
- **`colors.accent6`** (string): Color for "Accent 6".
- **`colors.hlink`** (string): Color for "Hyperlink".
- **`colors.folHlink`** (string): Color for "Followed Hyperlink".

Theme object:
```json
{
  "colors": {
    "lt1": "F5F2E3",
    "dk1": "6c685f",
    "lt2": "#CAD9EA",
    "dk2": "#5c6875",
    "accent1": "6b95a4",
    "accent2": "c9747f",
    "accent3": "7e9a62",
    "accent4": "tan",
    "accent5": "",
    "accent6": null,
    "hlink": "858499"
  }
}
```

---------------------------------------------------------------------


## Deleting elements {{ id: 'delete' }}

Assigning `{ "delete": true }` to a placeholder key will delete that object from the slide.

Deleting objects from a slide:

```json
"my_placeholder": {
  "delete": true
}
```

- All text boxes containing the placeholder will be deleted.
- All [table](#table) cells containing the placeholder will be emptied.
- All [tables](#table) and [charts](#chart) with matching **alt text** will be deleted.


---------------------------------------------------------------------


## Colors {{ id: 'colors' }}

Specify colors for fonts, fills, etc. using Hex codes or color names.

**Hex color codes** look like `#f6ad5c` or `FF0000`.
The leading `#` is optional.
Hex color codes are case-insensitive.

**Color names** can be `lt1`, `dk1`, `lt2`, `dk2`, `accent1`, `accent2`, `accent3`, `accent4`, `accent5`, `accent6`, `hlink`, or `folHlink`.
They correspond to the 12 named colors defined in the [theme](#theme) and can be customized.

![Theme colors](/en/images/theme-colors.png)

The following color names are available as well.
They are similar to [HTML color names](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names),
but please note that there are subtle differences such as "dark" vs "dk".
These color names are case sensitive.

| Name | Hex |
|------|-----|
| black | #000000 |
| dkSlateGray | #2f4f4f |
| dimGray | #696969 |
| slateGray | #708090 |
| gray | #808080 |
| ltSlateGray | #778899 |
| dkGray | #a9a9a9 |
| silver | #c0c0c0 |
| ltGray | #d3d3d3 |
| gainsboro | #dcdcdc |
| mistyRose | #ffe4e1 |
| antiqueWhite | #faebd7 |
| linen | #faf0e6 |
| beige | #f5f5dc |
| whiteSmoke | #f5f5f5 |
| lavenderBlush | #fff0f5 |
| oldLace | #fdf5e6 |
| aliceBlue | #f0f8ff |
| ltCyan | #e0ffff |
| seaShell | #fff5ee |
| ghostWhite | #f8f8ff |
| honeydew | #f0fff0 |
| floralWhite | #fffaf0 |
| azure | #f0ffff |
| mintCream | #f5fffa |
| snow | #fffafa |
| ivory | #fffff0 |
| white | #ffffff |
| medVioletRed | #c71585 |
| deepPink | #ff1493 |
| paleVioletRed | #db7093 |
| hotPink | #ff69b4 |
| ltPink | #ffb6c1 |
| pink | #ffc0cb |
| dkRed | #8b0000 |
| red | #ff0000 |
| firebrick | #b22222 |
| crimson | #dc143c |
| indianRed | #cd5c5c |
| ltCoral | #f08080 |
| salmon | #fa8072 |
| dkSalmon | #e9967a |
| ltSalmon | #ffa07a |
| orangeRed | #ff4500 |
| tomato | #ff6347 |
| dkOrange | #ff8c00 |
| coral | #ff7f50 |
| orange | #ffa500 |
| dkKhaki | #bdb76b |
| gold | #ffd700 |
| khaki | #f0e68c |
| peachPuff | #ffdab9 |
| yellow | #ffff00 |
| paleGoldenrod | #eee8aa |
| moccasin | #ffe4b5 |
| papayaWhip | #ffefd5 |
| ltGoldenrodYellow | #fafad2 |
| lemonChiffon | #fffacd |
| ltYellow | #ffffe0 |
| maroon | #800000 |
| brown | #a52a2a |
| saddleBrown | #8b4513 |
| sienna | #a0522d |
| chocolate | #d2691e |
| dkGoldenrod | #b8860b |
| peru | #cd853f |
| rosyBrown | #bc8f8f |
| goldenrod | #daa520 |
| sandyBrown | #f4a460 |
| tan | #d2b48c |
| burlyWood | #deb887 |
| wheat | #f5deb3 |
| navajoWhite | #ffdead |
| bisque | #ffe4c4 |
| blanchedAlmond | #ffebcd |
| cornsilk | #fff8dc |
| dkGreen | #006400 |
| green | #008000 |
| dkOliveGreen | #556b2f |
| forestGreen | #228b22 |
| seaGreen | #2e8b57 |
| olive | #808000 |
| oliveDrab | #6b8e23 |
| medSeaGreen | #3cb371 |
| limeGreen | #32cd32 |
| lime | #00ff00 |
| springGreen | #00ff7f |
| medSpringGreen | #00fa9a |
| dkSeaGreen | #8fbc8f |
| medAquamarine | #66cdaa |
| yellowGreen | #9acd32 |
| lawnGreen | #7cfc00 |
| chartreuse | #7fff00 |
| ltGreen | #90ee90 |
| greenYellow | #adff2f |
| paleGreen | #98fb98 |
| teal | #008080 |
| dkCyan | #008b8b |
| ltSeaGreen | #20b2aa |
| cadetBlue | #5f9ea0 |
| dkTurquoise | #00ced1 |
| medTurquoise | #48d1cc |
| turquoise | #40e0d0 |
| aqua | #00ffff |
| cyan | #00ffff |
| aquamarine | #7fffd4 |
| paleTurquoise | #afeeee |
| navy | #000080 |
| dkBlue | #00008b |
| medBlue | #0000cd |
| blue | #0000ff |
| midnightBlue | #191970 |
| dkSlateBlue | #483d8b |
| slateBlue | #6a5acd |
| medSlateBlue | #7b68ee |
| royalBlue | #4169e1 |
| steelBlue | #4682b4 |
| dodgerBlue | #1e90ff |
| deepSkyBlue | #00bfff |
| cornflowerBlue | #6495ed |
| skyBlue | #87ceeb |
| ltSkyBlue | #87cefa |
| ltSteelBlue | #b0c4de |
| ltBlue | #add8e6 |
| powderBlue | #b0e0e6 |
| indigo | #4b0082 |
| purple | #800080 |
| dkMagenta | #8b008b |
| dkViolet | #9400d3 |
| blueViolet | #8a2be2 |
| medPurple | #9370db |
| dkOrchid | #9932cc |
| fuchsia | #ff00ff |
| magenta | #ff00ff |
| medOrchid | #ba55d3 |
| orchid | #da70d6 |
| violet | #ee82ee |
| plum | #dda0dd |
| thistle | #d8bfd8 |
| lavender | #e6e6fa |


--------------------------------------------------

<!-- /md/recipes/001-repeat-slides/doc.md -->

# Repeating template slides

You can repeat a template slide to produce multiple similar slides.
Combine template slides in any order you like.

In this example, the template consists of two slides:

1. A title slide
2. A chart slide

and the output will contain 5 slides:

1. Title slide with "User behavior"
2. Chart slide with "User signups: Main Product"
3. Chart slide with "User signups: Other Product"
4. Title slide with "Customer service status report"
5. Chart slide with "Customer satisfaction"

Reference:
[the root object](/md/reference/data-json.md#root) ·
[the Slide object](/md/reference/data-json.md#slide)

Download: [input.zip](/en/recipes/001-repeat-slides/001-repeat-slides.zip) · [output.pptx](/en/recipes/001-repeat-slides/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/001-repeat-slides/template/slide1.png)
![template.pptx slide 2](/en/recipes/001-repeat-slides/template/slide2.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/001-repeat-slides/output/slide1.png)
![output.pptx slide 2](/en/recipes/001-repeat-slides/output/slide2.png)
![output.pptx slide 3](/en/recipes/001-repeat-slides/output/slide3.png)
![output.pptx slide 4](/en/recipes/001-repeat-slides/output/slide4.png)
![output.pptx slide 5](/en/recipes/001-repeat-slides/output/slide5.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "section-title": "User behavior"
    },

    {
      "template": 2,
      "chart-title": "User signups: Main Product",
      "insights": "Signups are still going strong.",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2020/1", "2020/2", "2020/3", "2020/4", "2020/5", "2020/6",
          "2020/7", "2020/8", "2020/9", "2020/10", "2020/11", "2020/12"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 200 },
          "series": {
            "Series-A": {
              "name": "Pattern A",
              "values": [50, 60, 71, 75, 91, 123, 135, 138, 140, 176, 187, 184]
            },
            "Series-B": {
              "name": "Pattern B",
              "values": [62, 55, 60, 91, 89, 106, 103, 125, 126, 138, 145, 139]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "chart-title": "User signups: Other Product",
      "insights": "Growth is slow, especially with pattern B.",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2020/1", "2020/2", "2020/3", "2020/4", "2020/5", "2020/6",
          "2020/7", "2020/8", "2020/9", "2020/10", "2020/11", "2020/12"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 200 },
          "series": {
            "Series-A": {
              "name": "Pattern A",
              "values": [20, 20, 32, 53, 58, 71, 65, 65, 98, 99, 99, 120]
            },
            "Series-B": {
              "name": "Pattern B",
              "values": [20, 20, 20, 23, 33, 27, 38, 51, 44, 36, 60, 44]
            }
          }
        }
      }
    },

    {
      "template": 1,
      "section-title": "Customer service status report"
    },

    {
      "template": 2,
      "chart-title": "Customer satisfaction",
      "insights": "",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009",
          "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019",
          "2020"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 1 },
          "format": "0%",
          "series": {
            "Series-A": {
              "name": "Customer satisfaction",
              "values": [
                0.4, 0.41, 0.45, 0.46, 0.45, 0.45, 0.52, 0.5, 0.54, 0.54,
                0.61, 0.59, 0.57, 0.66, 0.61, 0.66, 0.67, 0.68, 0.68, 0.75,
                0.72
              ]
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/010-text/doc.md -->

# Text

Replace text `{placeholder}`s with string values.

Placeholders can be anywhere in a slide, including the master slide, tables and shapes.

Reference:
[the Text object](/md/reference/data-json.md#text)

Download: [input.zip](/en/recipes/010-text/010-text.zip) · [output.pptx](/en/recipes/010-text/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/010-text/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/010-text/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "text1": "Text boxes can be placed anywhere in a slide.",
      "text2": "Fonts and styles from the template are preserved.",
      "text3": "Text box properties like auto-sizing are also preserved.",
      "text4": "You can",
      "text5": "replace",
      "text6": "text in",
      "text7": "tables."
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/011-text-options/doc.md -->

# Text with options

You can override styles for each of your placeholders.
To do so, use an object instead of a string to specify options.

(All styling from the template get carried over to the render output unless you override them.)

Reference:
[the Text object](/md/reference/data-json.md#text) ·
[the Styles object](/md/reference/data-json.md#styles)

Download: [input.zip](/en/recipes/011-text-options/011-text-options.zip) · [output.pptx](/en/recipes/011-text-options/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/011-text-options/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/011-text-options/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "text1": {
        "type": "text",
        "value": "Override styles by providing options.",
        "styles": {
          "font": {
            "size": 28,
            "color": "#000000",
            "underline": true,
            "italic": true
          }
        }
      },
      "text2": {
        "type": "text",
        "value": "You can create hyperlinks as well.",
        "hyperlink": "https://slidepack.io"
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/012-text-styles/doc.md -->

# Text styles

You can set styles for individual `{placeholder}`s.

Things you can specify include:
- Font family, size, color, bold, underline, etc (via `styles.font`).
  This affects only the text that replaced the placeholder.
- Shape fill color, border color, etc (via `styles.shape`).
  This affects the entire shape that contains the placeholder.
- Other aspects, depending on the context, such as chart series colors

You can also unset some styles by passing an empty string, e.g. `{"outline": ""}`.

Reference:
[the Text object](/md/reference/data-json.md#text) ·
[the Styles object](/md/reference/data-json.md#styles)

Download: [input.zip](/en/recipes/012-text-styles/012-text-styles.zip) · [output.pptx](/en/recipes/012-text-styles/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/012-text-styles/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/012-text-styles/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "text-with-styles": {
        "value": "Do it with style!",
        "styles": {
          "font": {
            "typeface": "Georgia",
            "color": "e4b054",
            "bold": true
          }
        }
      },

      "sign": {
        "value": "+",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 14
          }
        }
      },
      "number": {
        "value": "230",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 26,
            "bold": true
          }
        }
      },
      "unit": {
        "value": "%",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 14
          }
        }
      },

      "person": {
        "value": "Chick Corea",
        "styles": {
          "shape": {
            "fill": "f4e4c3",
            "outline": "b69858"
          }
        }
      },

      "remove-outline": {
        "value": "Outline removed",
        "styles": {
          "shape": {
            "outline": ""
          }
        }
      },
      "remove-fill": {
        "value": "Fill removed",
        "styles": {
          "shape": {
            "fill": ""
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/013-list/doc.md -->

# Lists

Populate bulleted lists or numbered lists with arrays of text.

SlidePack will turn your `{placeholder}` into a bulleted or numbered list.
All other content inside that text box will be removed.

If you have specific styles (fonts, bullet points, etc) in mind for each of the
indent levels:

1. Create a list in your template.pptx, with dummy content, but with all of your desired styles already applied.
2. Put a placeholder, e.g. `{my-list}` somewhere in that list.

`level` is a dedicated property of the Text object that dictates the indent level of each list item.
`0` (or unspecified) is the top level and `8` is the deepest.

Reference:
[the List object](/md/reference/data-json.md#list) ·
[the Text object](/md/reference/data-json.md#text) ·
[the Styles object](/md/reference/data-json.md#styles)

Download: [input.zip](/en/recipes/013-list/013-list.zip) · [output.pptx](/en/recipes/013-list/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/013-list/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/013-list/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "my-list": {
        "type": "list",
        "values": [
          "Items are strings",
          "or text objects.",
          { "type": "text", "value": "Indent levels are", "level": 1 },
          { "type": "text", "value": "integers, 0 upto 8.", "level": 1 },
          { "type": "text", "value": "Bullets and other formatting for each level", "level": 2 },
          { "type": "text", "value": "is inherited from the template.", "level": 2 },
          { "type": "text", "value": "Font styles can be specified.", "styles": { "font": { "bold": true, "color": "2a4598" } } }
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/020-table/doc.md -->

# Tables

Populate tables with two-dimensional arrays of strings.

SlidePack will look for tables that have the key (`"table1"` in this example) as its **alt text**.
In PowerPoint, right click on a table and select **View alt text** to change a table's alt text.

Reference:
[the Table object](/md/reference/data-json.md#table)

Download: [input.zip](/en/recipes/020-table/020-table.zip) · [output.pptx](/en/recipes/020-table/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/020-table/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/020-table/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "rows": [
          ["Fill", "a table", "with data", "from", "an array."],
          ["a", "b", "c", "d", "e"],
          ["f", "g", "h", "i", "j"],
          ["k", "l", "m", "n", "o"],
          ["p", "q", "r", "s", "t"]
        ]
      },
      "table2": {
        "type": "table",
        "rows": [
          ["If you have joined cells", "", "", "", ""],
          ["join state is", "", "preserved", "", ""],
          ["", "", "", "", ""],
          ["", "", "", "", ""],
          ["", "", "", "", ""],
          ["p", "q", "r", "s", "t"],
          ["u", "v", "w", "x", "y"]
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/021-table-options/doc.md -->

# Table with options

Provide objects instead of strings to specify options per cell.

Reference:
[the Table object](/md/reference/data-json.md#table) ·
[the Styles object](/md/reference/data-json.md#styles)

Download: [input.zip](/en/recipes/021-table-options/021-table-options.zip) · [output.pptx](/en/recipes/021-table-options/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/021-table-options/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/021-table-options/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "horizontal_sizing": "anchor_left",
        "vertical_sizing": "fixed",
        "rows": [
          [
            {
              "value": "You can",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#142047" }
              }
            },
            {
              "value": "specify",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#1e316b" }
              }
            },
            {
              "value": "styles",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#6680d4" }
              }
            }
          ],
          [
            {
              "value": "for",
              "styles": {
                "font": { "italic": true },
                "shape": { "fill": "#9caee4" }
              }
            },
            {
              "value": "each",
              "styles": {
                "font": { "underline": true },
                "shape": { "fill": "#cdd6f1" }
              }
            },
            {
              "value": "cell",
              "styles": {
                "font": { "bold": true },
                "shape": { "fill": "#d5e0f1" }
              }
            }
          ]
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/022-table-size/doc.md -->

# Table auto-resize

Rows and columns are added or deleted to accommodate the dimensions of your array.

You can control which way the table grows or shrinks by using the `horizontal_sizing` and `vertical_sizing` options:
- `horizontal_sizing` can be one of `fixed` (default), `anchor_left` or `anchor_right`.
- `vertical_sizing` can be one of `fixed`, `anchor_top` (default) or `anchor_bottom`.

Reference:
[the Table object](/md/reference/data-json.md#table)

Download: [input.zip](/en/recipes/022-table-size/022-table-size.zip) · [output.pptx](/en/recipes/022-table-size/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/022-table-size/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/022-table-size/output/slide1.png)
![output.pptx slide 2](/en/recipes/022-table-size/output/slide2.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "my-table": {
        "type": "table",
        "rows": [
          ["A-1", "A-2", "A-3", "A-4", "A-5"],
          ["B-1", "B-2", "B-3", "B-4", "B-5"],
          ["C-1", "C-2", "C-3", "C-4", "C-5"],
          ["D-1", "D-2", "D-3", "D-4", "D-5"],
          ["E-1", "E-2", "E-3", "E-4", "E-5"]
        ]
      }
    },
    {
      "template": 1,
      "my-table": {
        "type": "table",
        "rows": [
          ["A-1", "A-2", "A-3"],
          ["B-1", "B-2", "B-3"]
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/023-table-databars/doc.md -->

# Table data bars

Draw data bars (bar-chart like bars) in table cells by specifying the `databar` option.

`rows[n][m].databar.ratio` sets the length of the data bar. Use a number value between `0.0` and `1.0`.

`rows[n][m].databar.color` sets the color of the data bar.

Reference:
[the Table object](/md/reference/data-json.md#table)

Download: [input.zip](/en/recipes/023-table-databars/023-table-databars.zip) · [output.pptx](/en/recipes/023-table-databars/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/023-table-databars/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/023-table-databars/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "rows": [
          [
            "Guavas",
            {
              "value": "377mg",
              "databar": {
                "ratio": 1.0,
                "color": "ec696d"
              }
            }
          ],
          [
            "Bell Peppers",
            {
              "value": "190mg",
              "databar": {
                "ratio": 0.50,
                "color": "ffb469"
              }
            }
          ],
          [
            "Kiwifruit",
            {
              "value": "167mg",
              "databar": {
                "ratio": 0.44,
                "color": "ffb469"
              }
            }
          ],
          [
            "Strawberries",
            {
              "value": "98mg",
              "databar": {
                "ratio": 0.26,
                "color": "ffb469"
              }
            }
          ],
          [
            "Oranges",
            {
              "value": "96mg",
              "databar": {
                "ratio": 0.25,
                "color": "ffb469"
              }
            }
          ]
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/030-chart/doc.md -->

# Charts

Populate charts with objects containing data.

SlidePack currently supports the following chart types:
- Bar chart
- Line chart
- Area chart
- Pie/Donut chart
- Radar chart
- Scatter chart

<Note>
Data format for scatter charts are different from other types of charts.
See [Scatter charts](/md/recipes/035-scatter-chart/doc.md) for details.
</Note>

SlidePack will look for charts that have the key (`"chart1"` in this example) as its **alt text**.
In PowerPoint, right click on a chart and select **View alt text** to change a chart's alt text.

Reference:
[the Chart object](/md/reference/data-json.md#chart) ·
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart)

Download: [input.zip](/en/recipes/030-chart/030-chart.zip) · [output.pptx](/en/recipes/030-chart/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/030-chart/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/030-chart/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "chart1": {
        "type": "chart",
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "axis1": {
          "bounds": {
            "minimum": 50,
            "maximum": 150
          },
          "series": {
            "ser1": {
              "name": "Revenue",
              "values": [100, 130, 120, 130]
            },
            "ser2": {
              "name": "Expenses",
              "values": [85, 90, 80, 75]
            }
          }
        },
        "axis2": {
          "series": {
            "ser3": {
              "name": "Gross profit margin",
              "values": [0.15, 0.3, 0.33, 0.42],
              "styles": {
                "shape": { "fill": "ffdd99", "outline": "ffaa55" }
              }
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/031-chart-dynamic-series/doc.md -->

# Dynamic chart series

You can add more series to a chart by specifying non-existing series keys.

In this example, "series-c" through "baz" are all added as new series to the chart.

Newly added series are created as copies of the last existing series.

Colors for newly created series are auto-assigned by PowerPoint.

If your template has more series than your data, excess series are deleted. Axes that have no series remaining as a result are also deleted.

Reference:
[the Chart object](/md/reference/data-json.md#chart) ·
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart)

Download: [input.zip](/en/recipes/031-chart-dynamic-series/031-chart-dynamic-series.zip) · [output.pptx](/en/recipes/031-chart-dynamic-series/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/031-chart-dynamic-series/template/slide1.png)
![template.pptx slide 2](/en/recipes/031-chart-dynamic-series/template/slide2.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/031-chart-dynamic-series/output/slide1.png)
![output.pptx slide 2](/en/recipes/031-chart-dynamic-series/output/slide2.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "the-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "June"],
        "axis1": {
          "series": {
            "series-a": {
              "values": [4.4, 4.2, 4.1, 3.6, 3.3, 3.5]
            },
            "series-b": {
              "values": [3.4, 3.3, 3.3, 3, 2.9, 2.4]
            },
            "series-c": {
              "values": [3.6, 3.5, 3.3, 2.9, 2.6, 2.4]
            },
            "series-d": {
              "values": [3.2, 3.4, 3.3, 3, 3.1, 2.6]
            },
            "series-e": {
              "values": [3.2, 3.3, 3.4, 3.7, 4.2, 4.4]
            },
            "series-f": {
              "values": [3.1, 3.2, 3.3, 3.2, 3.1, 3.4]
            },
            "foo": {
              "values": [2.7, 2.3, 2.4, 2.1, 1.5, 1.2]
            },
            "bar": {
              "values": [2.1, 2.1, 2.4, 2.6, 2.4, 2.7]
            },
            "baz": {
              "values": [1, 1.2, 1.3, 1.5, 1.7, 1.8]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "the-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "June"],
        "axis1": {
          "series": {
            "bar-series-a": {
              "values": [4.4, 4.2, 4.1, 3.6, 3.3, 3.5]
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/032-chart-data-point-styles/doc.md -->

# Chart data point styles

You can specify styles for individual data points to make them stand out.

Please see the reference for what the styles object does for different types of charts.

Reference:
[the Chart object](/md/reference/data-json.md#chart) ·
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart) ·
[the Styles object](/md/reference/data-json.md#styles)

Download: [input.zip](/en/recipes/032-chart-data-point-styles/032-chart-data-point-styles.zip) · [output.pptx](/en/recipes/032-chart-data-point-styles/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/032-chart-data-point-styles/template/slide1.png)
![template.pptx slide 2](/en/recipes/032-chart-data-point-styles/template/slide2.png)
![template.pptx slide 3](/en/recipes/032-chart-data-point-styles/template/slide3.png)
![template.pptx slide 4](/en/recipes/032-chart-data-point-styles/template/slide4.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/032-chart-data-point-styles/output/slide1.png)
![output.pptx slide 2](/en/recipes/032-chart-data-point-styles/output/slide2.png)
![output.pptx slide 3](/en/recipes/032-chart-data-point-styles/output/slide3.png)
![output.pptx slide 4](/en/recipes/032-chart-data-point-styles/output/slide4.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "my-line-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190],
              "data_point_styles": [
                null, null, null, null,
                null, null, null, null,
                null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50],
              "data_point_styles": [
                null, null, null, null,
                null, null, { "shape": { "fill": "#99cc00", "outline": "#66cc00" } }
              ]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "my-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190],
              "data_point_styles": [
                null, null, null, null,
                null, null, null, null,
                null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 3,
      "my-pie-chart": {
        "type": "chart",
        "labels": ["Chrome", "Safari", "Firefox", "Samsung Internet", "Edge Legacy", "UC Browser"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Browser share",
              "values": [63.91, 18.2, 4.39, 3.28, 2.13, 2],
              "data_point_styles": [
                null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            }
          }
        }
      }
    },

    {
      "template": 4,
      "x-axis-title": "Length",
      "y-axis-title": "Mass",
      "my-scatter-chart": {
        "type": "scatter-chart",
        "axis1": {
          "series": {
            "series-a-y": {
              "name": "Current Generation",
              "values": [
                [150, 60.7],
                [156.2, 67.3],
                [153.7, 68.8],
                [155.7, 83.1],
                [160.5, 88.8],
                [163, 90],
                [171.8, 100.2],
                [166.9, 96.5],
                [175.6, 115.1],
                [176.5, 114]
              ],
              "data_point_styles": [
                null, null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b-y": {
              "name": "Previous Generation",
              "values": [
                [153.3, 45],
                [155.6, 58.2],
                [151.7, 48.7],
                [159.2, 65.2],
                [163.2, 71.1],
                [160.6, 65.3],
                [167.6, 70.8],
                [173.2, 84.4],
                [177.3, 87.2],
                [172.9, 99.1]
              ],
              "data_point_styles": [
                null, null, null, null, { "shape": { "fill": "#99cc00", "outline": "#66cc00" } }
              ]
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/033-chart-label-interval/doc.md -->

# Chart label interval

Sometimes your axis labels can get too crowded. Skip some labels by using the following chart options.

- `labels_interval` changes the interval of category labels (typically the X axis).
- `date_labels_major_unit` and `date_labels_major_time_unit` together (such as `2` + `months`) change the interval of date category labels (typically the X axis).
- `axis1.major_unit` changes the interval of value labels (typically the Y axis).

Reference:
[the Chart object](/md/reference/data-json.md#chart) ·
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart)

Download: [input.zip](/en/recipes/033-chart-label-interval/033-chart-label-interval.zip) · [output.pptx](/en/recipes/033-chart-label-interval/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/033-chart-label-interval/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/033-chart-label-interval/output/slide1.png)
![output.pptx slide 2](/en/recipes/033-chart-label-interval/output/slide2.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "the-chart": {
        "type": "chart",
        "labels": [
          "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990",
          "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000",
          "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010",
          "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020",
          "2021"
        ],
        "labels_interval": 5,
        "axis1": {
          "major_unit": 500,
          "series": {
            "series-a": {
              "values": [
                93, 157, 949, 785, 1036, 1640, 1700, 1964, 2234, 2502,
                2344, 3185, 3360, 3283, 3991, 4000, 4000, 3891, 3159, 3130,
                3134, 2961, 2622, 2531, 2193, 1942, 1994, 1661, 1217, 1000,
                1055, 1000, 1124, 1199, 1400, 1497, 1549, 1660, 1768, 1853,
                1890
              ]
            }
          }
        }
      }
    },
    {
      "template": 1,
      "the-chart": {
        "type": "chart",
        "date_labels": [
          29587, 29952, 30317, 30682, 31048, 31413, 31778, 32143, 32509, 32874,
          33239, 33604, 33970, 34335, 34700, 35065, 35431, 35796, 36161, 36526,
          36892, 37257, 37622, 37987, 38353, 38718, 39083, 39448, 39814, 40179,
          40544, 40909, 41275, 41640, 42005, 42370, 42736, 43101, 43466, 43831,
          44197
        ],
        "date_labels_format": "yyyy",
        "date_labels_major_unit": 6,
        "date_labels_major_time_unit": "years",
        "axis1": {
          "major_unit": 500,
          "series": {
            "series-a": {
              "values": [
                93, 157, 949, 785, 1036, 1640, 1700, 1964, 2234, 2502,
                2344, 3185, 3360, 3283, 3991, 4000, 4000, 3891, 3159, 3130,
                3134, 2961, 2622, 2531, 2193, 1942, 1994, 1661, 1217, 1000,
                1055, 1000, 1124, 1199, 1400, 1497, 1549, 1660, 1768, 1853,
                1890
              ]
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/034-charts/doc.md -->

# Various types of charts

Currently supported chart types are Bar, Line, Area, Pie and Scatter charts.

Reference:
[the Chart object](/md/reference/data-json.md#chart) ·
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart)

Download: [input.zip](/en/recipes/034-charts/034-charts.zip) · [output.pptx](/en/recipes/034-charts/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/034-charts/template/slide1.png)
![template.pptx slide 2](/en/recipes/034-charts/template/slide2.png)
![template.pptx slide 3](/en/recipes/034-charts/template/slide3.png)
![template.pptx slide 4](/en/recipes/034-charts/template/slide4.png)
![template.pptx slide 5](/en/recipes/034-charts/template/slide5.png)
![template.pptx slide 6](/en/recipes/034-charts/template/slide6.png)
![template.pptx slide 7](/en/recipes/034-charts/template/slide7.png)
![template.pptx slide 8](/en/recipes/034-charts/template/slide8.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/034-charts/output/slide1.png)
![output.pptx slide 2](/en/recipes/034-charts/output/slide2.png)
![output.pptx slide 3](/en/recipes/034-charts/output/slide3.png)
![output.pptx slide 4](/en/recipes/034-charts/output/slide4.png)
![output.pptx slide 5](/en/recipes/034-charts/output/slide5.png)
![output.pptx slide 6](/en/recipes/034-charts/output/slide6.png)
![output.pptx slide 7](/en/recipes/034-charts/output/slide7.png)
![output.pptx slide 8](/en/recipes/034-charts/output/slide8.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "my-line-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [ 100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190 ]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "my-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 3,
      "my-stacked-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 300 },
          "series": {
            "series-a": {
              "name": "Ads",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190]
            },
            "series-b": {
              "name": "Organic",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 4,
      "my-stacked-area-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 300 },
          "series": {
            "series-a": {
              "name": "Ads",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190]
            },
            "series-b": {
              "name": "Organic",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 5,
      "my-bar-line-combo-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": {
              "name": "Ads",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190]
            },
            "series-b": {
              "name": "Organic",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        },
        "axis2": {
          "bounds": { "minimum": 0, "maximum": 0.15 },
          "format": "0.0%",
          "series": {
            "series-x": {
              "name": "Conversion rate",
              "values": [
                0.027, 0.027, 0.03137, 0.03032, 0.03429, 0.03557, 0.0366,
                0.03596, 0.03577, 0.03753, 0.04116, 0.03944
              ]
            }
          }
        }
      }
    },

    {
      "template": 6,
      "my-pie-chart": {
        "type": "chart",
        "labels": ["Chrome", "Safari", "Firefox", "Samsung Internet", "Edge Legacy", "UC Browser"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Browser share",
              "values": [63.91, 18.2, 4.39, 3.28, 2.13, 2]
            }
          }
        }
      }
    },

    {
      "template": 7,
      "series-a-label": "Product A",
      "series-b-label": "Product B",
      "my-donut-chart": {
        "type": "chart",
        "labels": ["Africa", "Asia", "Europe", "South America", "North America", "Oceania"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Product A",
              "values": [4.4, 1.2, 0.7, 0.5, 0.3, 0.2]
            },
            "series-b": {
              "name": "Product B",
              "values": [3.5, 1.1, 0.4, 0.5, 0.3, 0.2]
            }
          }
        }
      }
    },

    {
      "template": 8,
      "x-axis-title": "Length",
      "y-axis-title": "Mass",
      "my-scatter-chart": {
        "type": "scatter-chart",
        "axis1": {
          "x_bounds": { "minimum": 130, "maximum": 200 },
          "y_bounds": { "minimum": 30, "maximum": 130 },
          "series": {
            "series-a-y": {
              "name": "Current Generation",
              "values": [
                [150, 60.7],
                [156.2, 67.3],
                [153.7, 68.8],
                [155.7, 83.1],
                [160.5, 88.8],
                [163, 90],
                [171.8, 100.2],
                [166.9, 96.5],
                [175.6, 115.1],
                [176.5, 114]
              ]
            },
            "series-b-y": {
              "name": "Previous Generation",
              "values": [
                [153.3, 45],
                [155.6, 58.2],
                [151.7, 48.7],
                [159.2, 65.2],
                [163.2, 71.1],
                [160.6, 65.3],
                [167.6, 70.8],
                [173.2, 84.4],
                [177.3, 87.2],
                [172.9, 99.1]
              ]
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/035-scatter-chart/doc.md -->

# Scatter charts

Populate scatter charts with objects containing data.

SlidePack will look for charts that have the key (`"chart1"` in this example) as its **alt text**.
In PowerPoint, right click on a chart and select **View alt text** to change a chart's alt text.

<Note>
Data format for non-scatter charts like bar charts are different from scatter charts.
See [Charts](/md/recipes/030-chart/doc.md) for details.
</Note>

Reference:
[the Scatter Chart object](/md/reference/data-json.md#scatter-chart)

Download: [input.zip](/en/recipes/035-scatter-chart/035-scatter-chart.zip) · [output.pptx](/en/recipes/035-scatter-chart/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/035-scatter-chart/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/035-scatter-chart/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "scatter1": {
        "type": "scatter-chart",
        "axis1": {
          "x_bounds": { "minimum": 0, "maximum": 10 },
          "y_bounds": { "minimum": 0, "maximum": 10 },
          "series": {
            "ser1": {
              "name": "Natural",
              "values": [
                [7.1, 5.1],
                [3.4, 6.9],
                [2.6, 2.6],
                [4.0, 8.1],
                [2.8, 4.5]
              ]
            },
            "ser2": {
              "name": "Synthetic",
              "values": [
                [4.6, 5.3],
                [5.2, 3.6],
                [6.0, 2.8],
                [6.3, 6.5],
                [8.2, 4.4]
              ],
              "styles": {
                "shape": { "fill": "ffdd99", "outline": "ffaa55" }
              }
            }
          }
        }
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/040-image/doc.md -->

# Images

Replace shapes with images by providing objects containing image information.

Reference:
[the Image object](/md/reference/data-json.md#image)

Download: [input.zip](/en/recipes/040-image/040-image.zip) · [output.pptx](/en/recipes/040-image/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/040-image/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/040-image/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "image": {
        "type": "image",
        "src": "images/home-office.jpg",
        "scaling": "contain",
        "overflow": "hidden"
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/041-image-scaling/doc.md -->

# Image scaling

Use the `scaling` option to control how an image is adjusted for a given placeholder shape.

With `{"scaling": "contain"}`, the image is resized to fit within the shape.

With `{"scaling": "cover"}`, the image is resized to cover the entire shape.
As a result, the image will overflow either horizontally or vertically, unless the aspect ratios match exactly.

When scaling is unspecified or `null`, the image is placed as-is according to its intrinsic size.

Reference:
[the Image object](/md/reference/data-json.md#image)

Download: [input.zip](/en/recipes/041-image-scaling/041-image-scaling.zip) · [output.pptx](/en/recipes/041-image-scaling/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/041-image-scaling/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/041-image-scaling/output/slide1.png)
![output.pptx slide 2](/en/recipes/041-image-scaling/output/slide2.png)
![output.pptx slide 3](/en/recipes/041-image-scaling/output/slide3.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "slide-title": "\"scaling\": \"contain\"",
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg",
        "scaling": "contain"
      }
    },
    {
      "template": 1,
      "slide-title": "\"scaling\": \"cover\"",
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg",
        "scaling": "cover"
      }
    },
    {
      "slide-title": "\"scaling\": null",
      "template": 1,
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg"
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/050-video/doc.md -->

# Video

Replace shapes with videos by providing objects containing video information.

Reference:
[the Video object](/md/reference/data-json.md#video)

Download: [input.zip](/en/recipes/050-video/050-video.zip) · [output.pptx](/en/recipes/050-video/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/050-video/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/050-video/output/slide1.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "video1": {
        "type": "video",
        "src": "my-video.mp4",
        "thumbnail": "thumb.png",
        "scaling": "contain"
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/060-theme/doc.md -->

# Changing theme colors

Change the colors defined in the theme. This change affects all slides.

A theme has 12 named colors, each of which you specify with an RGB hex code.

Unspecified colors and ones set to empty strings `""` or `null` retain their original colors. Theme color names such as `"dk1"` cannot be used as color values.

Reference:
[the root object](/md/reference/data-json.md#root) ·
[the Theme object](/md/reference/data-json.md#theme) ·
[Colors](/md/reference/data-json.md#colors)

Download: [input.zip](/en/recipes/060-theme/060-theme.zip) · [output.pptx](/en/recipes/060-theme/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/060-theme/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/060-theme/output/slide1.png)

data.json
```json
{
  "theme": {
    "colors": {
      "dk1": "6c685f",
      "lt1": "F5F2E3",
      "dk2": "#5c6875",
      "lt2": "#CAD9EA",
      "accent1": "6b95a4",
      "accent2": "c9747f",
      "accent3": "7e9a62",
      "accent4": "tan",
      "accent5": "",
      "accent6": null,
      "hlink": "858499"
    }
  },
  "slides": [
    {
      "template": 1,
      "text1": "Changing a theme color affects all text and shapes where that color is used."
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/100-analytics-report/doc.md -->

# Analytics report

This is an example of a full set of slides for analytics reporting, using various features available in SlidePack.

It uses 6 template slides, some of which are reused and repeated, to produce a deck of 8 slides.


Download: [input.zip](/en/recipes/100-analytics-report/100-analytics-report.zip) · [output.pptx](/en/recipes/100-analytics-report/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/100-analytics-report/template/slide1.png)
![template.pptx slide 2](/en/recipes/100-analytics-report/template/slide2.png)
![template.pptx slide 3](/en/recipes/100-analytics-report/template/slide3.png)
![template.pptx slide 4](/en/recipes/100-analytics-report/template/slide4.png)
![template.pptx slide 5](/en/recipes/100-analytics-report/template/slide5.png)
![template.pptx slide 6](/en/recipes/100-analytics-report/template/slide6.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/100-analytics-report/output/slide1.png)
![output.pptx slide 2](/en/recipes/100-analytics-report/output/slide2.png)
![output.pptx slide 3](/en/recipes/100-analytics-report/output/slide3.png)
![output.pptx slide 4](/en/recipes/100-analytics-report/output/slide4.png)
![output.pptx slide 5](/en/recipes/100-analytics-report/output/slide5.png)
![output.pptx slide 6](/en/recipes/100-analytics-report/output/slide6.png)
![output.pptx slide 7](/en/recipes/100-analytics-report/output/slide7.png)
![output.pptx slide 8](/en/recipes/100-analytics-report/output/slide8.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "client": "Blues Dream, Inc.",
      "report-title": "User Activity Report",
      "date": "June 1st, 2021"
    },

    {
      "template": 2,
      "period": "May 2021",

      "m1icon": { "type": "image", "src": "icons/users.png", "scaling": "contain" },
      "m1name": "Sessions",
      "m1": "68,338",
      "m1unit": "",
      "m1growth": { "value": "-16.1%", "styles": { "font": { "color": "#EA8673" } } },

      "m2icon": { "type": "image", "src": "icons/conversion.png", "scaling": "contain" },
      "m2name": "Conversion Rate",
      "m2": "2.47",
      "m2unit": "%",
      "m2growth": { "value": "+0.48", "styles": { "font": { "color": "#3FC862" } } },

      "m3icon": { "type": "image", "src": "icons/bounce.png", "scaling": "contain" },
      "m3name": "Bounce Rate",
      "m3": "48.23",
      "m3unit": "%",
      "m3growth": { "value": "-11.5", "styles": { "font": { "color": "#3FC862" } } }
    },

    {
      "template": 3,

      "chart-title": "Users/Conversion Rates",
      "line-chart": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 70000 },
          "series": {
            "Series 1": {
              "name": "Users",
              "values": [50619, 51369, 43932, 41395, 53330, 54263, 60800, 52627, 51957, 63027, 62708, 53121]
            }
          }
        },
        "axis2": {
          "bounds": { "minimum": 0, "maximum": 0.04 },
          "format": "0.00%",
          "series": {
            "Series 2": {
              "name": "Conversion Rate",
              "values": [0.0015, 0.0016, 0.0018, 0.0014, 0.001, 0.0017, 0.0122, 0.019, 0.02, 0.0201, 0.0197, 0.0247]
            }
          }
        }
      },

      "comparisons": {
        "type": "table",
        "rows": [
          ["", "Last Month", "This Month"],
          ["Users", "62,708", "53,121"],
          ["New Users", "58,691", "49,206"],
          ["Session Duration", "2:49", "3:15"],
          ["Bounce Rate", "54.66%", "48.23%"],
          ["Conversions", "1,547", "1,689"],
          ["Conversion Rate", "1.97%", "2.47%"]
        ]
      }
    },

    {
      "template": 4,

      "donut1-title": "Devices",
      "donut1": {
        "type": "chart",
        "labels": ["Desktop", "Mobile"],
        "axis1": {
          "series": {
            "Series": {
              "values": [36146, 15980]
            }
          }
        }
      },

      "donut2-title": "Languages",
      "donut2": {
        "type": "chart",
        "labels": ["en-us", "en-gb", "es-es", "etc"],
        "axis1": {
          "series": {
            "Series": {
              "values": [29633, 4740, 2022, 10037]
            }
          }
        }
      }
    },

    {
      "template": 5,

      "message": "Clicks are stabilizing, but conversion rates from ads need a boost",

      "chart1": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "maximum": 35000, "minimum": 0 },
          "series": {
            "Series 1": {
              "name": "Ad Clicks",
              "values": [964, 560, 1079, 0, 0, 6891, 29593, 31534, 9692, 9815, 9170, 9093]
            }
          }
        },
        "axis2": {
          "bounds": { "maximum": 250, "minimum": 0 },
          "series": {
            "Series 3": {
              "name": "CPC",
              "values": [0.38, 0.34, 0.18, 0.0, 0.0, 1.99, 1.48, 1.8, 1.28, 1.2, 1.33, 1.53]
            }
          }
        }
      },

      "chart2": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "maximum": 100, "minimum": 0 },
          "series": {
            "Series 1": {
              "name": "Conversions from Ads",
              "values": [2, 3, 2, 0, 1, 1, 66, 65, 79, 26, 12, 4]
            }
          }
        },
        "axis2": {
          "bounds": { "maximum": 14000, "minimum": 0 },
          "series": {
            "Series 3": {
              "name": "CPA",
              "values": [183.55, 62.55, 98.35, 0, 0, 13681.99, 665.09, 875.16, 156.95, 452.15, 1019.14, 3469.54]
            }
          }
        }
      },

      "comparisons": {
        "type": "table",
        "rows": [
          ["", "Impressions", "Cost", "Clicks", "CTR", "CPC", "Conversions", "CVR"],
          ["Total", "57191", "$13878.17", "9093", "15.9%", "153", "4", "0.53%"],
          ["MoM", "-3.9%", "+13.5%", "-0.9%", "+3.1%", "+14.4%", "-66.7%", "-61.8%"],
          ["YoY", "+4385%", "+115%", "+2768%", "-36.5%", "+320%", "+300%", "+168%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "Ad Performance by Campaign",

      "table1": {
        "type": "table",
        "rows": [
          ["", "Impressions", "Cost", "Clicks", "CTR", "CPC", "Conversions", "CVR"],
          ["Hoodies", "19,618", "910.08", "1,622", "8.27%", "0.56", "0", "0.00%"],
          ["YouTube", "6,280", "4,567.17", "1,932", "30.76%", "2.36", "0", "0.00%"],
          ["Tumbler", "4,974", "602.98", "746", "15.00%", "0.81", "0", "0.00%"],
          ["T-shirts", "2,688", "303.88", "357", "13.28%", "0.85", "0", "0.00%"],
          ["Apparel", "2,040", "2,289.38", "759", "37.21%", "3.02", "1", "7.14%"],
          ["Tumbler", "1,838", "604.03", "309", "16.81%", "1.95", "0", "0.00%"],
          ["Drinkware", "1,592", "684.81", "312", "19.60%", "2.19", "0", "0.00%"],
          ["Bags", "737", "885.68", "182", "24.69%", "4.87", "0", "0.00%"],
          ["Android Brand", "168", "43.81", "37", "22.02%", "1.18", "0", "0.00%"],
          ["Office", "106", "55.61", "18", "16.98%", "3.09", "0", "0.00%"],
          ["Accessories", "33", "207.35", "11", "33.33%", "18.85", "0", "0.00%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "Ad Performance by Ad Group",

      "table1": {
        "type": "table",
        "rows": [
          ["", "Impressions", "Cost", "Clicks", "CTR", "CPC", "Conversions", "CVR"],
          ["AW - YouTube Brand", "5,242", "$3,041.63", "1,645", "31.38%", "$1.85", "0", "0.00%"],
          ["AW - Hoodies", "4,417", "$119.39", "266", "6.02%", "$0.45", "0", "0.00%"],
          ["AW - Hoody", "3,810", "$109.47", "241", "6.33%", "$0.45", "0", "0.00%"],
          ["AW - Sweatshirt", "3,514", "$72.30", "160", "4.55%", "$0.45", "0", "0.00%"],
          ["AW - Hoodies", "3,293", "$264.59", "417", "12.66%", "$0.63", "0", "0.00%"],
          ["AW - Shirts", "3,055", "$303.81", "319", "10.44%", "$0.95", "0", "0.00%"],
          ["AW - Hoody", "2,989", "$238.93", "370", "12.38%", "$0.65", "0", "0.00%"],
          ["AW - Tumbler", "2,200", "$198.46", "327", "14.86%", "$0.61", "0", "0.00%"],
          ["AW - Apparel All", "1,663", "$1,805.35", "640", "38.48%", "$2.82", "1", "8.33%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "Ad Performance by Device",

      "table1": {
        "type": "table",
        "rows": [
          ["", "Impressions", "Cost", "Clicks", "CTR", "CPC", "Conversions", "CVR"],
          ["mobile", "43,021", "$8,959.98", "6,659", "15.48%", "$1.35", "0", "0.00%"],
          ["desktop", "10,507", "$4,009.69", "1,976", "18.81%", "$2.03", "4", "4.30%"]
        ]
      }
    }
  ]
}
```


--------------------------------------------------

<!-- /md/recipes/101-product-catalog/doc.md -->

# Product catalog

This is an example of a single template slide being reused to present a collection of products.

It uses a single template slide, which is repeated for each product, resulting in a deck of 5 slides.

Download: [input.zip](/en/recipes/101-product-catalog/101-product-catalog.zip) · [output.pptx](/en/recipes/101-product-catalog/output.pptx)

**template.pptx**

![template.pptx slide 1](/en/recipes/101-product-catalog/template/slide1.png)

**output.pptx**

![output.pptx slide 1](/en/recipes/101-product-catalog/output/slide1.png)
![output.pptx slide 2](/en/recipes/101-product-catalog/output/slide2.png)
![output.pptx slide 3](/en/recipes/101-product-catalog/output/slide3.png)
![output.pptx slide 4](/en/recipes/101-product-catalog/output/slide4.png)
![output.pptx slide 5](/en/recipes/101-product-catalog/output/slide5.png)

data.json
```json
{
  "slides": [
    {
      "template": 1,
      "name": "Blue Pattern Shirt",
      "description": "Cotton buttoned shirt with classic but modern pattern.",
      "pic": {
        "type": "image",
        "src": "pictures/blue pattern shirt.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["Materials", "Cotton"],
          ["Sizes", "S, M, L"],
          ["Availability", "Retail, Online"]
        ]
      }
    },
    {
      "template": 1,
      "name": "Linen washed shirt",
      "description": "Casual gray linen shirt, washed process.",
      "pic": {
        "type": "image",
        "src": "pictures/linen washed shirt.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["Materials", "Linen"],
          ["Sizes", "S, M, L"],
          ["Availability", "Retail, Online"],
          ["Imported from", "Italy"]
        ]
      }
    },
    {
      "template": 1,
      "name": "Lace Blouse",
      "description": "White lace blouse with geometric pattern stitching.",
      "pic": {
        "type": "image",
        "src": "pictures/lace blouse.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["Materials", "Cotton"],
          ["Sizes", "M"],
          ["Availability", "Online"],
          ["Imported from", "Spain"],
          ["Sustainability", "OEKO-TEX Standard 100 certified"]
        ]
      }
    },
    {
      "template": 1,
      "name": "Rose stitched blouse",
      "description": "Long-sleeve blouse with rose stitchings. Silky feel, with puffed sleeves.",
      "pic": {
        "type": "image",
        "src": "pictures/rose stitched blouse.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["Materials", "Polyester, Linen"],
          ["Sizes", "S, M, L"],
          ["Availability", "Retail"]
        ]
      }
    },
    {
      "template": 1,
      "name": "Dark jeans",
      "description": "Basic dark jeans. Slim silhouette.",
      "pic": {
        "type": "image",
        "src": "pictures/dark jeans.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["Materials", "Cotton"],
          ["Sizes", "S, M, L"],
          ["Availability", "Retail, Online"]
        ]
      }
    }
  ]
}
```


The latest version of this document is available at https://docs.slidepack.io