Different Colors in primefaces bar chart

Question

I would like to show primefaces barchart with different colors for each bar. the most close I got is like the image:

I would like to have different color those bars, like green for "on time", yellow for "warning " and red for "overdue"

I tried to used model.setSeriesColors("58BA27,FFCC33,F74A4A,F52F2F,A30303"); but if i do that each bar should be a new series, therefore I won't be able to show the labels as I wish (like the image), I got this..

last, how can I make it show 0,1,2,3 (integers) instead repeating 0_0_0_1_1_1_2_2_2 like the image 1 :/

thanks

Answer 1

I solved the problem by my own reading this jplot documentation , I'm posting here hope it can help someone...

for somehow, adding extender in the tag is not working for me, I have to put it via java code:

barModel.setSeriesColors("58BA27,FFCC33,F74A4A,F52F2F,A30303");
barModel.setExtender("chartExtender");

then javascript inside

<h:outputScript>
                        function chartExtender() {        
                         // this = chart widget instance        
                         // this.cfg = options      
                         this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
                        }
                        </h:outputScript>

and done!

Answer 2

I'm new here, so I unfortunately cannot add a comment to your answer. It worked for me too. Some clarifications for other readers:

Be sure to put the <h:outputScript> under your <p:chart... like:

<p:chart type="bar" model="#{bean.someModel}">
     <h:outputScript>
         function chartExtender() {
             // this = chart widget instance
             // this.cfg = options
             this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
         }
     </h:outputScript>
 </p:chart>

The "extender" -Tag has been removed in Primefaces 5: see this answer