How to change ADF DVT Bar Chart color dynamically?

Today we have described how to change a bar chart color based on user input with a simple example. The bar chart is created from a jobs table in HR schema. The X-axis is referring to Job-Title, and Y-axis is referring to Max-Salary. The page uses <af:inputColor> component which provides user to change the color. Default, the chart rendered with blue color and the color changes dynamically based upon user selection.  

Download this project –  ADF Bar Chart Change Color

ADF DVT Bar Chart Change Color Example

1. Create an ADF Fusion Web Application and create a JSF page with backing bean 

2. Create an Entity and View Object of Jobs table from HR schema (Instruction to create ADF EO & VO)

3. Drag and drop Job view object from data control palette to the JSF page and select Chart in the pop up (Instruction to create ADF Bar chart)

4. Drop <af:inputColor> component from component to the JSF page and add the property (autoSubmit=true) as shown below


5. In the bar chart component, add the property partialTrigger points to id of <af:inputColor> as shown below


6. In the chartDataItem, add the property ‘color’ where value binds to  <af:inputColor> value


7. The final JSF page is below


8. The backing bean has the setter & getter methods of JSF components

9. After run the JSF page


Head-300x265 How to Change ADF DVT bar chart color dynamically

govindan How to Change ADF DVT bar chart color dynamically
Connect me


Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan How to Change ADF DVT bar chart color dynamically
Connect me
By | 2016-12-15T21:57:27+00:00 December 15th, 2016|Categories: ADF|Tags: , , , |0 Comments
Like us on Facebook.