CODEWITHSUNDEEP
cssjsfprimefacesjqplot
smagrath
smagrath

Reputation: 281

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?

Upvotes: 3

Views: 11780

Answers (4)

Alhessan
Alhessan

Reputation: 1

for me as I am working on an old projec, Primefaces 6.2, the code that worked for me is as follows:

  this.cfg.axesDefaults= {
                tickOptions: {
                    textColor: '#fff'
                }
            };

note: this part of the code is inside extender functions which is set as follows inside java bean:

model.setExtender("linechartExtender");

then add the javascript fnctions in the xhtml file:

  <h:outputScript >
        function linechartExtender() {
           
            this.cfg.axesDefaults= {
                tickOptions: {
                    textColor: '#fff'
                }
            };

            
        }
       linechartExtender();
    </h:outputScript>

Upvotes: 0

Yitzhak Weinberg
Yitzhak Weinberg

Reputation: 2562

for my work this code

 axes: {
     xaxis: {
          borderColor: "#aa2626",
          tickOptions: {
             textColor: '#aa2626'
             }
          }
        }

Upvotes: 0

Zuckerj
Zuckerj

Reputation: 1

As Boro illustrates in his comments to his answer above, when using CanvasAxisLabelRenderer you need to use:

labelOptions: {textColor: '#eeccaa'}

in the xaxis or yaxis object block (same place you're referencing the labelRenderer):

yaxis:{
  label: 'Your Label'
  labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
  labelOptions: {textColor: '#eeccaa'},
  etc...
}

Just thought it would be good to highlight this rather than have it hide in a comment.

Thanks Boro!

Upvotes: 0

Boro
Boro

Reputation: 7943

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;

Upvotes: 7

Related Questions