0
197
ViewsHow 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.
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question