Setting Custom Chart Colors in the Page Designer

Last Updated: 08/12/2016 Introduced in Verision: 2.0

After adding a chart to a portal page, the user can customize the colors for each column on the chart.  The user must enter the column name while customizing its color.

To customize chart colors, select the chart in the Page Designer workspace.  In the Properties Panel, click the Use Custom Color checkbox, then define the colors using the Color Picker pop-up window.


The goal of this example is to:

  1. Add a Bars chart to the page;
  2. Set custom colors for the chart columns.

To begin, navigate to a Designer Folder and click the Create Page/Dashboard button.



In the resulting pop-up window, name the page and click Ok to open the Page Designer



Begin in the Toolbox Panel, by dragging a pre-designed Bars component to the workspace from the category Reports > [Existing Reports] > [Current Folder] > [Report] > [Chart].


In the Properties Panel, in the Chart Settings section, select the Use Custom Colors checkbox, then click the Value selector.


In the Color Picker pop-up window, select a color and click Ok.  The user can also define a custom color by moving the sliders to set the RGB color value.


To assign this color to a column displayed on the chart, enter the column name in the Value field, then click the Add button to add another color.


New controls display that the user can use to define the next custom color.  Enter the name for the next column that needs a custom color in the Value field.

Click the Value selector….


… define the color in the Color Picker pop-up, then click Ok.


Add one more color for the Designer project column.


This completes the page.  Save it and close the Page Designer.

To view the chart, select the newly created page’s thumbnail and select View > Preview Page from its Action menu.


The page opens, displaying the chart with the custom colors defined.


Additional Resources