Question

I have a simple JSF line chart that uses PrimeFaces (via jqPlot) library:

<p:lineChart id="linear"
             value="#{team.chart}" 
             title="Lap Times" 
             xaxisLabel="Lap"
             yaxisLabel="Time (sec)"
             style="height:300px;width:600px" /> 

However, I want to change the title and X/Y label colors of the chart. I can’t seem to find the right combination of CSS to make this happen. For example, the following DOES NOT work:

.jqplot-xaxis {
     /* skin */
     font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; 
     color: white ! important;
     font-size: 90%;
 }

Any thoughts?

Answer 1

This is exactly what I use for the title and X/Y labels of my charts:

.jqplot-title{
    color: #eeffdd;
}
.jqplot-xaxis-label{
    color: #eeccaa; 
}
.jqplot-yaxis-label{
    color: #eeccaa;
}

The setting of the .jqplot-xaxis class works fine it only changes the ticks of the xaxis. you can test it quickly by setting e.g. font-size: 20px;