javascript - Google Chart API: Change color on hovering legend - Stack Overflow

admin管理员组

文章数量:1316541

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!

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!

• javascript
• css
• svg
• google-api
• google-visualization

Share Improve this question Follow edited Oct 29, 2012 at 19:11 Peter Ilfrich asked Oct 28, 2012 at 17:35 Peter IlfrichPeter Ilfrich 3,81633 gold badges3333 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.

本文标签： javascriptGoogle Chart API Change color on hovering legendStack Overflow