Google column chart - set selected column color

Question

I have simple column chart and I need to change color of selected (clicked) column. By default it adds white line around the column.

var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  };

Here is simple example on jSFiddle

So if I click any column how to change its color to black? I can't use Material Charts.

Thanks

Answer 1

This worked for me

.my-div svg>g>g>g>g>rect { fill: #79baeb; }

Answer 2

Finally I found an answer here

Frankly I thought that there is simpler option, like setting configuration option e.g. hAxis.selected.color: '#000000'.

var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
        // setting the "isStacked" option to true fixes the spacing problem
        isStacked: true,
        height: 300,
        width: 600,
        series: {
            1: {
                // set the color to change to
                color: '00A0D0',
                // don't show this in the legend
                visibleInLegend: false
            }
        }
    }
});

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getChart().getSelection();
    if (selection.length > 0) {
        var newSelection = [];
        // if row is undefined, we selected the entire series
        // otherwise, just a single element
        if (typeof(selection[0].row) == 'undefined') {
            newSelection.push({
                column: 2
            });
            chart.setView({
                columns: [0, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function () {
                        // this series is just a placeholder
                        return 0;
                    }
                }, 1]
            });
        }
        else {
            var rows = [];
            for (var i = 0; i < selection.length; i++) {
                rows.push(selection[i].row);
                // move the selected elements to column 2
                newSelection.push({
                    row: selection[i].row,
                    column: 2
                });
            }

            // set the view to remove the selected elements from the first series and add them to the second series
            chart.setView({
                columns: [0, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function (dt, row) {
                        return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
                    }
                }, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function (dt, row) {
                        return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
                    }
                }]
            });
        }
        // re-set the selection when the chart is done drawing
        var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
            google.visualization.events.removeListener(runOnce);
            chart.getChart().setSelection(newSelection);
        });
    }
    else {
        // if nothing is selected, clear the view to draw the base chart
        chart.setView();
    }
    chart.draw();
});

chart.draw();

}

UPDATE: Above solution works only if you are using a ChartWrapper. I actually needed solution just for chart. Finally I solved this by adding style.color to the data row. If my selected index = rowIndex then I change the color. Simple and works like a charm. I hope it will help others.

    var data = new google.visualization.DataTable();
    data.addColumn({ id: 'name', type: 'string' });
    data.addColumn({ id: 'm1', type: 'number' });
    data.addColumn({type: 'string', role:'tooltip', 'p': {'html': true}});
    data.addColumn({type: 'string', role:'style'});
    $.each(scatterData.data, function (index, value) {
        if (index == chartSelectedIndex) {
            data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, 'color: #32CCFF' ]);
        } else{
            data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, null ]);
        };
    });