How to set custom on mouse over styles on bar chart?

user_3209523 0
Viewed 37

I can set the selection of my bar charts with setSelection method. You can see this in the below GIF.

enter image description here

I want to make the white lines in the image thicker. Basically, I want to apply a custom style when a bar is selected. I couldn't find it on the API documentation.

google-visualization bar-chart charts javascript
1 Answers

it is not possible to style the selection using standard options provided by google
but we can apply our own custom css

the bars are drawn using SVG <rect> elements
so we first need to identify attributes we can use to isolate selected bars

using the element inspector in the developer tools,
it appears we can identify selected bars using the following selector...

rect[fill-opacity="0"]:not([stroke="none"])

with which we can apply custom css...

rect[fill-opacity="0"]:not([stroke="none"]) {
  stroke: cyan;
  stroke-width: 8px;
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [2010, 4, 2, 10]
  ]);
  var container = document.getElementById('chart');
  var chart = new google.visualization.ColumnChart(container);
  
  // select first column when chart is drawn
  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });
  
  chart.draw(data);
});
rect[fill-opacity="0"]:not([stroke="none"]) {
  stroke: cyan;
  stroke-width: 8px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

user_50907710
Related