How to change selected column border color & width in Google Charts? - google-visualization

Question

I am using Google Charts. I want to change border color & width of selected column. By default stroke color is white and width is 1. I want to change border color to black and width to 2.
Code :
var data = google.visualization.arrayToDataTable(mydata);
var options = {
width: 600,
height: 400,
legend: {position: 'top', maxLines: 4},
bar: {groupWidth: '50%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);

Answer 1

There is no build-in option to set this style, but you may ovveride these settings for stroke-color/width via CSS:
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
legend: {position: 'top', maxLines: 4},
isStacked: true};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
}
#mydiv svg>g>g>g>g>rect[stroke="#ffffff"][stroke-width="1"] {
stroke: black !important;
stroke-width: 2px !important;
}
<div id="mydiv"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Answer 2

You could set column style (border color & width) by applying Column styles on the selected column using select event as demonstrated below:
google.load("visualization", '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature'],
['2010', 10, 24, 20, 32, 18, 5],
['2020', 16, 22, 23, 30, 16, 9],
['2030', 28, 19, 29, 30, 12, 13]
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_stacked'));
google.visualization.events.addListener(chart, 'select', function () {
highlightBar(chart,options,view);
});
chart.draw(data, options);
}
function highlightBar(chart,options,view) {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var column = selection[0].column;
//1.insert style role column to highlight selected column
var styleRole = {
type: 'string',
role: 'style',
calc: function(dt, i) {
return (i == row) ? 'stroke-color: #000000; stroke-width: 2' : null;
}
};
var indexes = [0, 1, 2, 3, 4, 5, 6];
var styleColumn = findStyleRoleColumn(view)
if (styleColumn != -1 && column > styleColumn)
indexes.splice(column, 0, styleRole);
else
indexes.splice(column+1, 0, styleRole);
view.setColumns(indexes);
//2.redraw the chart
chart.draw(view, options);
}
}
function findStyleRoleColumn(view) {
for (var i = 0; i < view.getNumberOfColumns() ; i++) {
if (view.getColumnRole(i) == "style") {
return i;
}
}
return -1;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="columnchart_stacked" style="width: 600px; height: 420px;"></div>
JSFiddle