Overridding the default chart font

UI Components for JSF
Post Reply
honyk
Posts: 150
Joined: 28 Sep 2010, 11:14

07 Aug 2018, 14:05

I am trying to override the default font used by charts. I do it via extender and this jqPlot option reference.

While I suppose this option should be sufficient, it doesn't work:

Code: Select all

this.cfg.fontFamily = 'Muli';
It doesn't work when I specify it for axes directly:

Code: Select all

this.cfg.axesStyles = {
    ticks: {
        fontFamily: 'Muli'
    },
    label: {
        fontFamily: 'Muli'
    }
};

Code: Select all

this.cfg.axes = {
    xaxis: {
        labelOptions:{
            fontFamily: 'Muli',
        }
    }
};
It only works for legend:

Code: Select all

this.cfg.legend = {
    fontFamily: 'Muli'
};
Am I missing something?

PF 6.2

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

07 Aug 2018, 21:53

You could examine this example about remove grid and border:

https://stackoverflow.com/questions/383 ... t-barchart


Maybe, this example will be helpful for you.

honyk
Posts: 150
Joined: 28 Sep 2010, 11:14

09 Aug 2018, 11:15

My settings was based on outdated jqPlot option description.

Axis tick label font can be changed this way:

Code: Select all

this.cfg.axesDefaults = {
    tickOptions: {
       fontFamily: 'Muli'
    }
}; 
For chart title it is better to move it directly into XHTML code as it share the font of the page without further tweaks.

For series point labels the font can be changed via css:

Code: Select all

.jqplot-point-label {
    font-family: 'Muli';
} 
For the legend the font can be changed this way:

Code: Select all

this.cfg.legend = {
    fontFamily: 'Muli'
};
I am satisfied now :-)

Scary
Posts: 1
Joined: 01 Dec 2021, 13:52

01 Dec 2021, 14:07

You can change font size, color, ecc.. via code, when creating the chart, by using the methods provided by primefaces; take as example a radar chart:

Code: Select all

		RadarChartOptions options = new RadarChartOptions();		
		RadialScales rad = new RadialScales(); 				//Object which contains the scales changes
		RadialLinearTicks ticks = new RadialLinearTicks();	//Object which refers to the values in the radar chart
		ticks.setFontSize(14);								
		rad.setTicks(ticks);
		RadialLinearPointLabels pointLabels = new RadialLinearPointLabels();	//this refers to the point labels so you can change whatever you want (font size, color, font family)
		pointLabels.setFontSize(16);
		
		rad.setPointLabels(pointLabels);	//here it is the assignment to the object which gathers the scales options
		options.setScales(rad);			//this is the assignment to the global options object
		radarModel.setOptions(options); 	//this is the assignment of the options to the radar model

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests