# Add Chart to Page

To start using charts in Page Designer, the **Charts Extension** must first be added to your application.\
Once the extension is installed and enabled, users can design dashboard pages and embed dynamic chart components directly into the page layout.

***

#### Enable Charts Extension

1. In **Page Designer**, go to the **Settings** tab.
2. Open the **Extensions** section.
3. Add and enable the **Charts Extension** for your application.

Once enabled, the chart component becomes available in the Page Designer component library.

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

***

#### Create and Design the Dashboard Page

Create a standard page in your application and design the layout according to your dashboard requirements.

From the **Components** tab:

1. Locate the **Chart** component provided by the Charts Extension.
2. Drag and drop the chart component onto the page canvas.

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

At this stage, the chart is placed on the page and ready for configuration.

***

#### Configure Chart Properties

After adding the chart to the page, configure its properties using the **Properties panel**.

Users can specify:

* Chart type (line, bar, pie, etc.)
* Chart title
* Visual style and layout
* Color scheme and appearance options

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

These settings control how the chart is rendered on the dashboard page.

***

#### Provide Static Data (Optional)

For initial testing or simple dashboards, users can provide **static data** directly in the chart configuration.

This allows the chart to be rendered immediately without requiring backend integration.

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

***

#### Create Dynamic Charts Using Microflow

To build **dynamic, data‑driven charts**, the chart component must be connected to a **Microflow**.

In this scenario:

* The Microflow retrieves data from databases or services
* The chart component consumes the Microflow output
* Chart data is updated dynamically at runtime

This approach enables real‑time dashboards and interactive data visualization.

***

#### Summary

By using the **Charts Extension in Page Designer**, users can:

* Add charts directly to pages using drag‑and‑drop
* Configure chart appearance through the UI
* Use static data for simple scenarios
* Integrate Microflows for dynamic, real‑time dashboards

This method represents the **recommended and modern approach** to building dashboards in ONEWEB.


---

# 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/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/dashboard/dashboard-using-page-extension/add-chart-to-page.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.