Search code examples
javascriptchartsgoogle-visualizationbar-chart

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.

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.

Solution

  • 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>