Charts and reports

Combine charts, tables and text in a single template to create sales, marketing or project reports. Creating your own chart does not require buying a ready-made report design.

Creating a chart in Generator

1. Add a Chart from Assets, then choose its type and title in the inspector.
2. Open Edit chart data to edit series names, colors, categories and numeric values. Add series or rows as needed.
3. Apply transfers changes to the chart. Cancel discards changes made inside the dialog. Save your template and check its preview and outputs.

Types and limits

Column, horizontal bar, line, area, pie and donut charts are supported. Their JSON type codes are:

The samples are drawn by the product’s own chart engine from the same four rows; only the type code changes.

Each chart supports up to 100 categories and 6 series. Pie and donut charts allow only one series and reject negative values.

Template element example

This object is a chart element in the elements array of a schemaVersion: 2 template, not a complete render request. The example stores data directly in content.data.

{
  "id": "monthly-revenue",
  "type": "chart",
  "placementMode": "flow",
  "layout": { "width": 100, "widthUnit": "percent", "height": 240 },
  "content": {
    "title": "Revenue",
    "data": [{ "month": "Jan", "revenue": 42 }, { "month": "Feb", "revenue": 52 }]
  },
  "chart": {
    "type": "bar",
    "labelField": "month",
    "series": [{ "field": "revenue", "label": "Revenue", "color": "#e3232a" }],
    "showLegend": true,
    "showValues": true
  }
}

Binding dynamic data

To use different data for each document, add binding: monthlyRevenue to the chart element and send an array of objects named monthlyRevenue in the request data. Remove content.data in this case. labelField selects the category field; each series field selects its numeric value. Nested paths such as sales.net are supported.

Missing or non-finite numbers are not converted to zero; they remain gaps in line and area charts. Correct negative pie or donut values in your source data. Some value labels may be omitted in dense charts to avoid overlap.

A report with live data

A chart bound to monthlyRevenue reads the array of the same name from the request. The template stays the same; only the numbers arrive with each call.

curl -X POST https://api.pdfgine.com/api/v1/render \
  -H "X-PDFgine-Key: $PDFGINE_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "templateCode": "sales-report",
        "format": "pdf",
        "locale": "en",
        "data": {
          "monthlyRevenue": [
            { "month": "2026-01", "revenue": 42000, "target": 40000 },
            { "month": "2026-02", "revenue": 51500, "target": 45000 },
            { "month": "2026-03", "revenue": 47250, "target": 50000 }
          ]
        }
      }'

Each object in the array is one category. labelField picks the category name and every series field picks a number from the same object.

What usually goes wrong

• binding and content.data are alternatives, not a pair. A chart that has both keeps drawing the fixed data and your request looks ignored.
• Series values have to be numbers. "42.000,00" is a string; format it for the reader in a text element, not in the series.
• A chart takes at most 100 points and 6 series. Aggregate before you send rather than hoping the extra rows are drawn.
• In Word the chart is an image, not an editable Word chart. A reader who expects to click into it will be disappointed; PDF and the viewer show the same drawing.
• 100% is the width of the containing area, not of the sheet. Inside a column or a padded container it is narrower than the page.

Preview and output behavior

Charts use a shared SVG renderer. PDF and Viewer preserve their appearance; Word exports contain chart images rather than native editable Word chart objects.

A width of 100% means the available width of the containing area, not the entire sheet. Page margins, columns and padding can reduce that area.