# Integrate Chart with Data

After creating a Microflow to retrieve chart data, the final step is to **connect the chart component to the Microflow output**.

Page Designer provides a built‑in **Connect to Data** feature that allows users to bind a chart element directly to Microflow data without writing additional code.

***

#### Use Connect to Data on Chart Component

To integrate a chart with Microflow data:

1. Select the **Chart** element on the page.
2. Click the **Connect to Data** option in the chart properties.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FwvXaELScLfDsE4yq6SVy%2F0?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Bind Microflow Output to Chart

After opening the **Connect to Data** dialog:

1. Choose the **Microflow** that retrieves the chart data.
2. Map the Microflow output to the chart data input.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FykCj6thbarhWz6wKGBkU%2F1?alt=media" alt=""><figcaption></figcaption></figure>

This step links the runtime data returned by the Microflow to the chart component.

***

#### Finalize Data Integration

Once the Microflow is connected and the mapping is complete:

* The chart automatically consumes data returned by the Microflow
* Chart rendering becomes fully **dynamic**
* Data updates are reflected at runtime without page redesign

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FBE9VcL01c6i5piZeGPQa%2F2?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Result

After completing this integration:

* The chart renders using **live data**
* The dashboard updates dynamically based on backend changes
* The Page Extension–based dashboard is fully functional

***

#### Summary

By integrating a chart with Microflow data:

* Charts become dynamic and data‑driven
* No manual refresh or static configuration is required
* Page Designer provides a seamless UI‑based data binding experience

This completes the workflow for building a **dynamic dashboard using Charts Extension in Page Designer**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/dashboard/dashboard-using-page-extension/integrate-chart-with-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.