About the border in ColumnChart

[likigoldenstar]

Hi, I' want to draw the borders in my Column Chart.
But it doesn't seem to work properly.

Here is my code.

backgroundColor.XXX properties don't work. What is wrong in my code?

Additionally, font of the vAxis and hAxis' title is italic, how can I
change it normal font?
And how can I draw it as a bold font?


var chart = new
google.visualization.ColumnChart(document.getElementById('barChart2'));

//var chart = new
google.visualization.BarChart(document.getElementById('barChart2'));
chart.draw(data, {
width: 420,
height: 240,
title: '',
vAxis: {
title: '% of Change',
titleTextStyle: {color: '#1c65bd', fontSize:14,
fontName: 'Arial, Helvetica, sans-serif'},
},

'backgroundColor': '#FFF',
'backgroundColor.stroke': '#F00',
'backgroundColor.strokeWidth':'12',
'backgroundColor.fill': '#0F0',
'chartArea':{left:50, top:10},
'colors': ['#1c65bd', '#f26300', '#78757d'],
'legend': 'none',
'hAxis.textPosition': 'none',
'hAxis': {title: '', titleTextStyle: {color:
'#676A6F', fontSize:12}},
});

[asgallant]

backgroundColor can only be declared as a string or as an object, not both.  If you want to use the sub-options, you need to declare it as an object.  Remove the line:

'backgroundColor': '#FFF',

Also, your quotes might be causing some problems.  Try this instead:

'backgroundColor': {

     'stroke': '#F00',

     'strokeWidth': 12,

     'fill': '#0F0'

}

You don't need the single quotes around the property names unless you intend to pass this through a JSON interpreter (like retrieving it from a PHP script via AJAX).  There's nothing wrong with using them, though, you just have to use them right.