How to change colors in Primefaces chart? - jsf

Question

I have several questions how to improve this Primefaces chart.
This is the source code:
<h:form>
<p:barChart id="basic" value="#{DashboardController.categoryModel}" legendPosition="ne"
title="Accounts and Groups" min="0" max="200" style="height:400px"
shadow="true" barPadding="60"/>
</h:form>
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;
#Named("DashboardController")
#SessionScoped
public class Dashboard implements Serializable
{
/*
* Call the Oracle JDBC Connection driver
*/
#Resource(name = "jdbc/Oracle")
private DataSource ds;
private CartesianChartModel categoryModel;
public Dashboard()
{
createCategoryModel();
}
public CartesianChartModel getCategoryModel()
{
return categoryModel;
}
private void createCategoryModel()
{
categoryModel = new CartesianChartModel();
// Active Accounts
ChartSeries ActiveAccounts = new ChartSeries();
ActiveAccounts.setLabel("Active Accounts");
ActiveAccounts.set("Active Accounts", 120);
categoryModel.addSeries(ActiveAccounts);
// Blocked Accounts
ChartSeries BlockedAccounts = new ChartSeries();
BlockedAccounts.setLabel("Blocked Accounts");
BlockedAccounts.set("Blocked Accounts", 120);
categoryModel.addSeries(BlockedAccounts);
// Active Groups
ChartSeries ActiveGroups = new ChartSeries();
ActiveGroups.setLabel("Active Groups");
ActiveGroups.set("Active Groups", 120);
categoryModel.addSeries(ActiveGroups);
// Blocked Groups
ChartSeries BlockedGroups = new ChartSeries();
BlockedGroups.setLabel("Blocked Groups");
BlockedGroups.set("Blocked Groups", 120);
categoryModel.addSeries(BlockedGroups);
}
}
Can you tell me how I can change the color of the chart size, also the color of "Accounts and Groups"?
I also want to ask you how I can add names below every column? Now I have only one name "Active Accounts". I want to name the columns individually.
Best wishes
P.S I tested this code into the JSF header but it's not working:
<script type="text/css">
.jqplot-title{
color:red;
}
</script>
P.S 2 Only the label of the chart is changed

Answer 1

Use the seriesColors attribute of <p:barChart
like this seriesColors="000000, FFFFFF, 2288AA"
about the title and the axis color, use this:
.jqplot-title{
color: #FF0000;
}
.jqplot-xaxis-label{
color: #FF0000;
}
.jqplot-yaxis-label{
color: #FF0000;
}