--- title: "Adding and Customizing Charts on a Page" slug: "adding-charts-portal-page" description: "This document shows how to add and customize Charts on a Portal Page in Decisions. Charts are a visual representation of Report results and can be customized by changing colors represented in the chart, adding titles and legends, etc. " tags: ["Runtime Edtiable Charts", "Charts", "Reports", "Pages and Dashboards"] updated: 2026-06-30T16:53:21Z published: 2026-06-30T16:53:21Z canonical: "documentation.decisions.com/adding-charts-portal-page" --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Adding and Customizing Charts on a Page ## Overview A Chart is a type of [Page Component](https://documentation.decisions.com/version-10/docs/page-component-glossary) that is used to graphically represent Report Data on a Page/Dashboard. Similar to other Page components, Charts can be accessed by expanding their respective Toolbox category (REPORTS > CHARTS). When a Report is used to source a Chart, it typically contains some grouping on one of the data fields as the visual representation basis. For example, a purchase request **Report** might be grouped by the **State** of Pending, Approved, or Denied requests. The following document demonstrates how to utilize some of the common **Properties** of Charts to customize **Charts** on a **Page**. --- ## Adding Charts 1. From the **Page** **Designer**, navigate to **Toolbox > REPORTS > CHARTS**. 2. Click and drag the desired **Chart** option into the workspace. 3. From the **Properties** tab of the newly added Chart, under CHART SETTINGS, provide a **Title** for the Chart. If desired, enable **Show** **Title**. 4. Under CHART DATA > Source, PICK the desired **Report**. Chart Source Prerequisites **Grouping Required** - Only Reports with Group By settings applied can be used as a data source for Charts. To apply [**Grouping**](https://documentation.decisions.com/version-10/docs/adding-charts-to-a-report): - Open the Report in the Report Designer. - Select a DataField and apply a GroupBy condition. **Respect Date Range Filter on Page (Optional):** - In order for the Chart to respect a Date Range Filter applied on the Page, the underlying Report must also have a Date Range Filter. **Multi-Series Chart Behavior:** - Charts are sourced from a single **Series** of data; therefore, if a [**Multi-Series Chart**](https://documentation.decisions.com/version-10/docs/multi-series-charts) is used as the Source, users must select a specific Series via the respective **Property** on the Chart. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781110293932.png) --- ## Design Time Customization The following example shows some of the methods for customizing Charts at Design Time. For this example, each Chart is sourced from a Report that utilizes and Groups a different Data Field in the Account Data Source. These are as follows: - a Pie Chart that is grouped by Created on Date - an Areas Chart that is grouped by Created By - a Bubbles Chart that is grouped by Can Use Portal - a Simple Bars Chart that is grouped by Department To customize Charts at Design time: 1. Select the desired **Chart** (for example **Pie** **Chart**). 2. From the Chart's **Properties** tab, under **CHART SETTINGS > Base Colors**, click the **Add** icon. Then, PICK the desired Colors. Color Priority Adding **Base** **Colors** to a **Chart** will apply the selected **Colors** to different sections of the **Pie** **Chart**. Colors, including Base Colors are applied in the following order: - **Series** **Colors** - when more than one series is visible. - **User-Defined Colors** - where they match particular element labels, and only one series is visible - **Base** **Colors** - as a list applied ahead of default colors in the order of element appearance. - The default Colors - as a repeating fallback; there is currently a set of 12 default Colors that based primarily on Decisions branding. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781110571655.png) 3. Select the **Areas** **Chart**; from its Properties tab, under CHART SETTINGS, enable **Shorten** **Long** **Axis** **Labels** 4. Under **Maximum Label Length**, indicate a number for the desired character length. Verify that the **Axis** **Labels** will adjust to the Maximum Length. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781110602800.png) 5. Navigate to the the **Bubbles** **Chart's** Properties tab. Under CHART SETTINGS, enable **Set** **Maximum** **Value**. Then, provide the desired max numerical Value. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781534076605.png) --- ## Runtime Editable Charts **Runtime** **Editable** **Charts** are **Charts** that provide users additional options for customization at **Runtime**. Hovering over a Chart at Runtime will provide access to the **Personalization** icons (when applicable); when Personalization is active for a specific category, it's respective icon will display as orange. Personalization is applied in two layers, one for managing entries/**Data** **Filters** and the other for managing the look & feel **Configuration** of the chart. Additionally, changes during Runtime can be applied to the **Session**, the current **User**, or **All Users**. ### Filter Layer The **Charts** **Filter** provides an **Appearance** category. From here, **Labels** along the non-value **Axis** of a **Chart**, as well as **Series** visibility, can be toggled, display Labels can be modified, and entries can be reordered (via Sorting). Further, related Chart entry Labels can also be grouped, entry **Colors** can also be modified here, and configured Colors for particular Labels from the **User** **Defined** **Colors** can also be overridden. ### Configuration **Chart** **Configuration** options vary by **Chart** **Type**. For example, some Charts Types can toggle between other Types; for example, **Pie** **Charts** can be changed to **Ring** **Charts** at **Runtime**. Where applicable, **Titles** can be changed, **Tooltips** may be configured, **Legends** and **Number** formatting may be adjusted, and **Export**/**Import** **Personalizations** may be applied. ### Runtime Editable Example To use some of the Runtime Editable Chart features: 1. View the **Page** on a **Dashboard**. Hover over a **Chart** to display the **Filter** and **Configuration** icons. 2. Select the **Filters** icon. Toggle the **Labels** on or off as desired.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781111748773.png) 3. Hover over the **Areas** **Chart**, choose the Filter icon, select the **Grouping** icon (series of cascading squares), choose two different Labels, then select **Group**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781111820287.png) 4. Name the new grouped "Label" and select SAVE.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1781111848988.png) 5. Verify that the selected Labels and **Values** are grouped within the designated **Group** **Name**. 6. Hover over the **Bars** **Chart**, select the Configuration icon, change the **Label** **Rotation**, then click SAVE. 7. After observing the rotation of the **Labels**, from the **Configuration** category, select RESET and verify that the **Chart** reverts to its original Label orientation. --- ## Feature Changes | Description | Version | Release Date | Developer Task | | --- | --- | --- | --- | | Chart Parts: Add Respect Page Date Filter Setting | [9.10](https://documentation.decisions.com/v99/docs/version-910x-release-notes) | May 2025 | [DT-040187] |