---
title: "Add charts to Dynamic Documents"
slug: "add-charts-to-dynamic-documents"
updated: 2026-08-18T12:23:20Z
published: 2026-08-18T12:23:20Z
canonical: "knowledge.lightico.com/add-charts-to-dynamic-documents"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.lightico.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add charts to Dynamic Documents

Using charts, you can display session data visually in a Dynamic Document instead of listing it as plain text. Charts are useful for summarizing numeric data — like a loan payment breakdown for auto financing, a coverage comparison for an insurance policyholder, or a usage summary for a telecom account — so the customer can grasp key figures at a glance instead of reading through a block of numbers.

Each chart is built from one or more series, where each series is mapped to a numeric Attribute. When the session runs, the chart populates automatically from the customer's data.

> [!NOTE]
> **Note**
> 
> Charts are currently supported in Dynamic Documents only. They are not available in visual cart Dynamic Documents or PDF Templates.

## Add a chart

**To add a chart:**

1. In the HTML designer, place your cursor where you want the chart to appear.
2. Click the **Chart** icon in the toolbar. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(501).png) The chart configuration dialog opens.
3. Under **Data mapping**, add a series:
  1. Enter a **name** for the series.
  2. Select a number **Attribute** for the data source.
  3. Select a **color** to represent the series.
4. Click **Add series** to add additional series and repeat step 3 for each one.
5. Under **Chart settings**, configure the following appearance settings:
  - **Chart type** — select **Bar**, **Stacked bar**, or **Doughnut**.
  - **Width** — the width of the chart, set as a **Percent** (relative to the page width) or **Pixels** (fixed).
  - **Thickness** *(Doughnut only)* — the thickness of the middle of the doughnut ring, as a percentage of its radius.
  - **Direction** (*Bar and Stacked bar only*) - select the direction of the bars: **Horizontal** or **Vertical**
  - **Show legend** — turn on to display a legend listing each series and its color.
  - **Legend position** — where the legend appears relative to the chart (e.g. **Right**).
  - **Summary labels** *(Doughnut only)* — up to two Attribute/Label pairs to display at the center of the chart. Each can be any Attribute — not limited to the ones used in the series. For example, select an Attribute that aggregates the full monthly payment, with the label "Total Payment."
6. Preview the chart to confirm it reflects the expected structure and layout.

> [!NOTE]
> Note
> 
> The preview is a simulation. Actual values populate only during a live session.

![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/2026-08-17_13-10-22.png)
7. Click **Done**. A placeholder appears in the document. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(502).png)

---

### Edit or delete a chart

**To edit or delete a chart:**

1. Select the chart.
2. Click the icon in the context menu. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(503).png)

Documents created entirely in the Lightico UI, displayed as dynamic HTML and converted to PDF after signing or approval.

An identifying label that you bind to data in a session that enables you to organize and make use of the data during the session.

A PDF document that has been enhanced with interactive fields so that it can be completed by a customer in a session.