# Charts

**Charts** in ONEWEB Page Designer allow developers to visualize data using graphical representations such as bar charts, line charts, and other chart types.\
Page Designer uses the **ChartJS extension** to provide flexible and interactive charting capabilities for web and mobile applications.

Charts are commonly used for:

* Dashboards
* Reports and analytics
* Monitoring KPIs
* Visualizing real‑time or historical data

Charts can be populated using:

* **Static data**
* **Dynamic data from Microflows**

***

### Enable ChartJS Extension

Before creating charts, the **ChartJS extension** must be added and enabled in the application.

#### Step 1: Open Extensions in Resources

1. Open **Page Designer**
2. Go to the **RESOURCES** tab

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FkzOupv8Oe4HFy11T8W1R%2Fimage.png?alt=media&#x26;token=9450880f-0583-489c-8df7-8faa424fd6a7" alt=""><figcaption></figcaption></figure>

3. Open the **Extensions** sub‑tab
4. Click **Add more extension**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FoxVtdA5tvFZv027GnoOu%2Fimage.png?alt=media&#x26;token=f01776da-9ce2-4698-9d0e-3bcb15556a72" alt=""><figcaption></figcaption></figure>

***

#### Step 2: Install ChartJS Extension

1. Drag & Drop the **PGDChart (ChartJS)** extension file\
   **or**
2. Browse and select the extension file

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FZoLbciaai3COtWhljfoT%2Fimage.png?alt=media&#x26;token=e4c191ab-71c2-4720-8e07-620440a371ba" alt=""><figcaption></figcaption></figure>

3. Click **Install**
4. Close the extension window

***

#### Step 3: Verify Extension Status

Ensure the ChartJS extension is **added and enabled** for your application.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FPxygmiENX39CSrH5Acb6%2Fimage.png?alt=media&#x26;token=4a1ac761-672d-46c1-9356-893c6363023a" alt=""><figcaption></figcaption></figure>

***

### Create a Chart on a Page

#### Step 4: Add Chart Component

1. Open the page where you want to display the chart
2. From the **CHART** panel, drag and drop a **Chart** component onto the page

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2ForfPeFjEnEOkFBQu5wSM%2Fimage.png?alt=media&#x26;token=c323018e-8103-43f6-86fb-99c7132bd476" alt=""><figcaption></figcaption></figure>

***

#### Step 5: Configure Chart Properties

1. Select the Chart component
2. Open the **Chart Properties** tab
3. Set chart attributes such as:
   * Chart type
   * Labels
   * Axis settings
   * Appearance options

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FCRQ3sOCYtETaScAdXH4Y%2Fimage.png?alt=media&#x26;token=4e537185-48dd-42c2-beb5-bcdf02fa3213" alt=""><figcaption></figcaption></figure>

***

### Configure Chart Data

Charts support both **static** and **dynamic** data.

***

#### Option 1: Edit Static Chart Data

1. Click **Edit Chart Data**\
   **or**
2. Click the **Edit Data icon** on the design panel

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F4BYaAnzp6wQJYfjUGG0x%2Fimage.png?alt=media&#x26;token=5f175baa-6fe8-47bd-8f9f-9b15e48b4fca" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FSk1bo7a8jXliKP2zCZ83%2Fimage.png?alt=media&#x26;token=5f802801-3666-41eb-9c0e-66e611d79ece" alt=""><figcaption></figcaption></figure>

***

#### Option 2: Bind Chart to Microflow Data

Charts can dynamically display data returned from **Microflows**.

1. Click the **Connect to Data** icon
2. Bind the chart to a Microflow output

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjH5Kyw3oytkyjNLwx4nc%2Fimage.png?alt=media&#x26;token=94a649fa-cbf3-4cad-8b41-fb3b44e92f01" alt=""><figcaption></figcaption></figure>

***

### Build and View Chart Output

1. Save the page
2. Build the application
3. Preview the page to see **real‑time chart data** from the Microflow output

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FWMLqvb3RYCVQQxt3o5CB%2Fimage.png?alt=media&#x26;token=d1b716e4-087c-46c1-8b4f-5b73d8a59cbd" alt=""><figcaption></figcaption></figure>

***

### Design Perspective

As part of **Page Designer best practices**:

* Use charts to communicate insights, not raw data
* Choose the appropriate chart type for the data
* Keep labels and legends readable
* Avoid overloading charts with too many data points
* Use Microflows for real‑time or aggregated data

Charts enable ONEWEB applications to present **clear, visual, and actionable data insights**.


---

# 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/pages/page-features/charts.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.