Question

0

69

Views

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

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

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.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T22:56:44.130Z

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>