Change the opacity of the bar where the mouse is hovered in Google column chart

I am a beginner programmer of Javascript. looking for a code snippet to change the bar color when the mouse is hovered over it in a google column chart. I have the following code for changing corner radius of the bar onmouseover.

google.visualization.events.addListener(
    chart,
    "onmouseover",
    changeBorderRadius
);

function changeBorderRadius() {
    chartColumns = container.getElementsByTagName("rect");

    Array.prototype.forEach.call(chartColumns, function (column) {
        column.setAttribute("rx", 5);
        column.setAttribute("ry", 5);
        column.setAttribute("opacity", 0.5); // added this line
    });
}

The line I added changes the opacity of all bars in the chart. How can I change the color of only the bar over which the mouse is pointed?

the 'onmouseover' (and 'onmouseout') event receives an argument that provides the data table row and column of the bar that is affected by the event.

{row: 0, column: 1}

here, we are interested in the row property, since each bar in the chart represents a row in the data table.
column will always be 1, since we only have 1 series in the chart.

as for finding the chart's <rect> elements that represent the bars,
we need to use something on the element to filter from the other <rect> elements in the chart.

<rect> elements are also used to draw the chart area and surrounding chart edges.
so we can't just get all of the <rect> elements found in the chart.

in the following example, I use the bar fill color to find the <rect> elements that represent the bars.

var chartColumns = chart.getContainer().querySelectorAll('rect[fill="' + chartColor + '"]');

then the data table row is passed from the event to the function used to set the bar's opacity.

the 'onmouseout' event is used to return the bar back to full opacity

see following working snippet...

// initialize google charts
google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  // initialize variables
  var chartColor = '#3366cc';
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density'],
    ['Copper', 8.94],
    ['Silver', 10.49],
    ['Gold', 19.30],
    ['Platinum', 21.45]
  ]);
  var options = {
    bar: {
      groupWidth: '95%'
    },
    colors: [chartColor],
    height: 400,
    legend: {
      position: 'none'
    },
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600
  };

  // initialize chart events
  google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
  google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);

  // draw chart
  chart.draw(data, options);

  // chart mouseover event
  function chartMouseOver(sender) {
    // set opacity to 0.5
    setBarOpacity(sender.row, 0.5);
  }

  // chart mouseout event
  function chartMouseOut(sender) {
    // set opacity to 1
    setBarOpacity(sender.row, 1);
  }

  // set bar opacity
  function setBarOpacity(index, opacity) {
    // filter bars by fill color
    var chartBars = chart.getContainer().querySelectorAll('rect[fill="' + chartColor + '"]');

    // set opacity on index provided
    chartBars[index].setAttribute('opacity', opacity);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart"></div>