How to change color of primefaces multi series bar chart

Question

I am having a Primefaces p:chart (BarChartModel) with multi Series and I am trying to change the default colors of multi Series bar.

My p:chart code is:

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
        }
    </h:outputScript>
</p:chart>

Bean code that sets the SeriesColors is:

    genderChartModel.setSeriesColors("ff9933, 77933c");
    genderChartModel.setExtender("chartExtender");

While this code perfectly works for a bar chart with single series, it doesn't produce the desired result for multi series.

Attaching the picture of how it is displaying currently.

What I need is for each section A, B, C the boys bar in Orange and girls bar in Green.

Have come across many other examples in Stackoverflow related to this topic, but they all have a single series. Please suggest how to achieve this for multi series in a simple way. Hope this is not a duplicate.

Got more information on how to use jqplot from

Customize primefaces chart

Vary Color Bar For Two Series Data in Jqplot

My code now is:

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
            this.cfg.series = 
                            [
                            {seriesColors: ["#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33"]}, 
                            {seriesColors: ["#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c"]}
                            ]
        }
    </h:outputScript>
</p:chart>

and bean code is

genderChartModel.setExtender("chartExtender");

Now the problem is different

The label name and legend colors are messed up, though those values are set in the bean and it was working fine before. Looks like this.cfg.series overwrites all the other values that are part of it. Surprisingly the legend color is not automatically picked up based on the chart bars - it could at least pick up the first two!! Looks like there is no easy solution to achieve what is needed!!

Answer 1

you should set value of group each chartseries than use "chartseriescolors" attribute for change color of bars. if you set only one value for group multiseries color will be same. so set value of group each chartseries. i solved this problem this way.

Answer 2

         ChartSeries A = new ChartSeries();
         ChartSeries B = new ChartSeries();
         A.setLabel("A");
         B.setLabel("B");

             A.set("1", 1);
             B.set("1", 2);

         model.addSeries(A);
         model.addSeries(B);

Answer 3

@Kukeltje, here is the answer.

        genderChartModel.addSeries(boys);
        genderChartModel.addSeries(girls);

        genderChartModel.setSeriesColors("ff9933, 77933c");

        genderChartModel.setTitle("");
        genderChartModel.setLegendPosition("e");
        genderChartModel.setLegendPlacement(LegendPlacement.OUTSIDEGRID);