Question

So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.

Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I’ve found no way of changing:

1. The style of the highlight-border (primarily the color) or
2. The color of the columns (fill color) when their respective category is selected in the legend.

Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?

Help is highly appreciated!

Answer 1

In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc…)
you can play around with advanced selectors and maybe you’ll be able to achieve you what you want.
I created a very quick and buggy example, but maybe it will point you on the right direction.

For example:

div.google_chart svg g g g g rect { 
            stroke-width:0px; fill:red; 
            }

Hope it helps.