Change font size of the vAxis and hAxis titles in column chart

[Anky]

Is there any way to customize the font size of title text in column
chart? I am being specific to xAxis and yAxis titles.

Could not find any solution in the forum so far.

Thanks,
Anky

[KeithB]

Anky,

The font size related configuration options according to
http://code.google.com/apis/visualization/documentation/gallery/columnchart.html#Configuration_Options
are:

fontSize
legendFontSize
titleFontSize
tooltipFontSize

But it looks like there's an undocumented configuration options:
vAxis.titleFontSize and hAxis.titleFontSize

Here's some Google Code Playground code I used to test:


function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', 1336060, 1538156, 1576579, 1600652,
1968113, 1901067],
['Belgium', 3817614, 3968305, 4063225, 4604684,
4013653, 6792087],
['Czech Republic', 974066, 928875, 1063414, 940478,
1037079, 1037327],
['Finland', 1104797, 1151983, 1156441, 1167979,
1207029, 1284795],
['France', 6651824, 5940129, 5714009, 6190532,
6420270, 6240921],
['Germany', 15727003, 17356071, 16716049, 18542843,
19564053, 19830493]];

var years = [2003, 2004, 2005, 2006, 2007, 2008];

data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}

data.addRows(years.length);

for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}

// Create and draw the visualization.
new
google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:900,
height:400,
fontSize:10,
legendFontSize:14,
titleFontSize:26,
tooltipFontSize:12,
hAxis: {title: "Year",
titleColor:'#cc0000',
titleFontSize:48}}
);
}


Cheers,
Keith

[Anky]

Hey Keith,

Thanks for the reply!

I am using GWT integrated Column chart.. tried few combinations
suggested by you but hard luck on my side..
here is what I had tried:
options.setOption("vAxis", "{title:"+Anky+"}");
options.setOption("vAxis", "{titleFontSize:10}"); - this does not
works for the vAxis font. It does not even displays the title this
way.

similar to options.setOption("titleFontSize", 12); - this works for
the chart's title font

Thanks,
Anky

On Jul 30, 10:56 am, KeithB <kbornho...@gmail.com> wrote:
> Anky,
>

> The font size related configuration options according tohttp://code.google.com/apis/visualization/documentation/gallery/colum...

[Jinji]

For now, the GWT wrappers use by default the old charts, and not the new corechart package. You can specify the new corechart package, as explained here: http://code.google.com/p/gwt-google-apis/wiki/VisualizationFAQ?ts=1278503711&updated=VisualizationFAQ#How_do_I_use_the_updated_Chart_look_and_feel?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jinji]

You can take another look at http://code.google.com/apis/visualization/documentation/gallery/columnchart.html#Configuration_Options. Some new text style options were just added.

[Varun Chopra]

Thanks, I have done it using titleTextStyle under hAxis. Please find the link below. Hope it helps!

https://jsfiddle.net/vCillusion/zw6jbjx5/12/

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.