Setting Custom Chart Colors in the Page Designer
  • Updated on 10 Oct 2013
  • 1 minute to read
  • Print
  • Dark
    Light

Setting Custom Chart Colors in the Page Designer

  • Print
  • Dark
    Light

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 work space.  In the Properties Panel , click the Use Custom Color checkbox, then define the colors using the Pick Color dialog. Please take note that some chart types do not allow separate custom colors.
Example
The goal of this example is to:

  1. Add a Pie chart to the page;

  2. Set custom colors for the chart columns.

To begin, navigate to a Designer Folder and navigate to All > Manage > Page > Add Page button.
2018-03-09_082703-1024x519.png

In the resulting Create New Page dialog, name the page and click CREATE to open the Page Designer
2018-03-09_082811-1024x519.png

Begin in the Page Elements panel, by dragging a Pie chart component to the workspace from the category Reports > [Existing Reports] > [Current Folder] > Report: Report 1 > Chart: Count(folder_type_name) .
2018-03-09_082857-1024x519.png

In the Properties Panel , in the Chart Settings section, select the Use Custom Colors checkbox, then click the Add New selector.
2018-03-09_083017.png

In the Pick Color dialog, select a color and click PICK .  The user can also define a custom color by selecting Advanced . Select OK to finish assigning this value a color. Back in the Properties panel assign more colors to specific values.

2018-03-09_083207-1024x519.png

In the Properties panel under User Defined Colors assign more colors to specific values. Your changes will not be seen within the Page Designer.
2018-03-09_083223-1024x519.png

This completes the page.  Save it and close the Page Designer .
To view the chart, select the newly created page select View > Preview Page from its Action menu.
2018-03-09_083432-1024x519.png

The page opens, displaying the chart with the custom colors defined.
2018-03-09_083713-1024x519.png

Was this article helpful?