Search code examples
cssjsfprimefacesjqplot

How to change the label color of a Primefaces/jqPlot line chart?


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?


Solution

  • 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;