--- 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: 2025-05-09T16:39:19Z published: 2025-05-09T16:39:19Z --- > ## 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/v9/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/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/v9/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/2025-04-23_13h32_10.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/2024-07-02_16h59_22.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/2024-07-02_17h00_52.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/2024-07-02_17h01_52.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/2024-07-03_14h17_57.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/2024-07-03_14h18_35.png) 4. Name the new grouped "Label" and select SAVE.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-03_14h24_06.png) 5. Verify that the selected Labels and **Values**are grouped within the designated **Group****Name**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-03_14h24_47.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-03_14h26_14.png) --- ## 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] |