Chart Syntax

To insert charts in your template, add a placeholder chart to the template, place a tag in the chart's title and provide the chart data in the expected format.

The placeholder chart must match the chart type you want to insert.

Simple Example

Lets see how to use the chart syntax to create a simple sales performance report:

Add a placeholder chart to the template.
Place a tag in the chart's title.

In this example we've added the {{ SalesChart }} tag in the placeholder chart's title:

Sales Performance Report

This report provides an overview of our monthly sales performance across all product categories.

The chart below shows our sales trends over the past 6 months. As we can see, there has been consistent growth in our overall revenue.

We've set the chart data for this example to:

{
  "SalesChart": {
    "_type": "chart",
    "title": "Sales Overview",
    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "series": [
      {
        "name": "Sales",
        "color": "#34d399",
        "values": [65, 59, 80, 84, 82, 90]
      }
    ]
  }
}

The resulting document contains the populated "Sales Overview" chart:

Sales Performance Report

This report provides an overview of our monthly sales performance across all product categories.

The chart below shows our sales trends over the past 6 months. As we can see, there has been consistent growth in our overall revenue.

Chart Options

Chart data format varies depending on the chart type. The common properties are:

Property	Type	Description
`_type`	string	Must be set to "chart" for all chart types
`title`	string	Optional. The title to use instead of the tag name. If not provided the tag will be replaced with an empty string.

Chart Styling

Charts preserve their original settings from the template, including:

Font styles and sizes
Axis formatting
Grid lines
Legend position and style
Chart dimensions and layout

You can customize the following aspects through the input JSON data:

Chart title
Series colors (using hex color codes)
Series names for the legend
Data values and labels

The chart's visual style (fonts, grid, dimensions, etc.) is determined by the placeholder chart in your template. Make sure to set up the placeholder chart with your desired styling before generating documents.

Chart Types

Bar Chart

Example

{
  "MyChart": {
    "_type": "chart",
    "title": "Monthly Sales",
    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "series": [
      {
        "name": "Revenue",
        "color": "#34d399",
        "values": [65, 59, 80, 81, 56, 55]
      },
      {
        "name": "Expenses",
        "color": "#f87171",
        "values": [45, 49, 60, 71, 46, 45]
      }
    ]
  }
}

Bar Chart Properties

Property	Type	Description
`_type`	`string`	Must be set to "chart"
`title`	`string`	Optional. The title to use instead of the tag name
`categories`	`string[]`	Array of labels for the x-axis
`series`	`object[]`	Array of data series objects
`series[].name`	`string`	Optional. Legend label for the series
`series[].color`	`string`	Optional. Hex color code for the bars
`series[].values`	`number[]`	Array of numeric values matching categories

Line Chart

Example

{
  "LineChart": {
    "_type": "chart",
    "title": "Temperature Trends",
    "categories": ["05/01", "05/07", "05/14", "05/25", "05/31"],
    "series": [
      {
        "name": "May",
        "values": [20, 22, 25, 23, 27]
      }
    ]
  }
}

Line Chart Properties

Property	Type	Description
`_type`	`string`	Must be set to "chart"
`title`	`string`	Optional. The title to use instead of the tag name
`categories`	`string[]`	Array of labels for the x-axis
`series`	`object[]`	Array of data series objects
`series[].name`	`string`	Optional. Legend label for the series
`series[].color`	`string`	Optional. Hex color code for the bars
`series[].values`	`number[]`	Array of numeric values matching categories

Pie Chart

Both pie and doughnut charts are supported. They have the same properties.

Example

{
  "PieChart": {
    "_type": "chart",
    "title": "Revenue Distribution",
    "series": [
      {
        "name": "Electronics",
        "value": 300,
      },
      {
        "name": "Books",
        "value": 50
      },
      {
        "name": "Clothing",
        "value": 100
      }
    ]
  }
}

Pie Chart Properties

Property	Type	Description
`_type`	`string`	Must be set to "chart"
`title`	`string`	Optional. The title to use instead of the tag name
`series`	`object[]`	Array of value objects
`series[].name`	`string`	Optional. Label for the value
`series[].value`	`number`	Numeric value

Notice that pie and doughnut charts have a single series.

Scatter Chart

Example

{
  "ScatterChart": {
    "_type": "chart",
    "title": "Height vs Weight",
    "series": [
      {
        "name": "Males",
        "color": "#10b981",
        "values": [
          { "x": 165, "y": 65 },
          { "x": 168, "y": 70 },
          { "x": 170, "y": 68 },
          { "x": 172, "y": 75 },
          { "x": 175, "y": 73 },
          { "x": 178, "y": 78 },
          { "x": 180, "y": 82 },
          { "x": 182, "y": 85 }
        ]
      },
      {
        "name": "Females",
        "color": "#8b5cf6",
        "values": [
          { "x": 160, "y": 55 },
          { "x": 165, "y": 58 },
          { "x": 168, "y": 73 },
          { "x": 170, "y": 63 },
          { "x": 172, "y": 77 },
          { "x": 175, "y": 68 },
          { "x": 178, "y": 70 },
          { "x": 165, "y": 61 }
        ]
      }
    ]
  }
}

Scatter Chart Properties

Property	Type	Description
`_type`	`string`	Must be set to "chart"
`title`	`string`	Optional. The title to use instead of the tag name
`series`	`object[]`	Array of data series objects
`series[].name`	`string`	Optional. Legend label for the series
`series[].color`	`string`	Optional. Hex color code for the series
`series[].values`	`object[]`	Array of value objects
`series[].values[].x`	`number`	X-axis value
`series[].values[].y`	`number`	Y-axis value

Bubble Chart

Example

{
  "BubbleChart": {
    "_type": "chart",
    "title": "Sales vs Marketing",
    "series": [
      {
        "name": "Marketing Effort",
        "color": "#fbbf24",
        "values": [
          { "x": 1, "y": 10, "size": 10 },
          { "x": 2, "y": 15, "size": 20 },
          { "x": 3, "y": 8, "size": 40 },
          { "x": 4, "y": 12, "size": 30 }
        ]
      }
    ]
  }
}

Bubble Chart Properties

Property	Type	Description
`_type`	`string`	Must be set to "chart"
`title`	`string`	Optional. The title to use instead of the tag name
`series`	`object[]`	Array of data series objects
`series[].name`	`string`	Optional. Legend label for the series
`series[].color`	`string`	Optional. Hex color code for the series
`series[].values`	`object[]`	Array of value objects
`series[].values[].x`	`number`	X-axis value
`series[].values[].y`	`number`	Y-axis value
`series[].values[].size`	`number`	Size of the bubble