Re: Change column highlight effect on mouse over

[asgallant]

Neither of those is supported in the API.  In theory you could write javascript that modifies the SVG/VML chart code to change the color of the border, but doing so could prove tedious and would not be guaranteed to work in future versions of the API.  The second is doable, though, with a bit of hackery.  Here's an example that does this: http://jsfiddle.net/asgallant/5SX8w/.  Since you have so many data series, it would likely be easier to modify that code to handle an arbitrary number of series rather than change it to do 10.

On Sunday, October 28, 2012 2:19:29 PM UTC-4, Peter Ilfrich wrote:

Hi,

So I have a ColumnChart and one of the built-in functionality is that you can hover over an item 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 (=10 different 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:

a) The style of the highlight-border (primarily the color) or

b) The color of the columns (fill color) when their respective category is selected in the legend.

Help is highly appreciated!

Thanks,

Peter

[Peter Ilfrich]

I've actually solved the problem by navigating down the DOM tree and changing the element that pops-up when you hover/highlight something:

div.google_chart svg g g g g rect {
  fill:red;
}

This matches exactly the highlight-box, which appears around a bar if you hover it and NO other element. Works like a charm. I guess you could also change the border color / thickness or some other parameters, but this did it for me :)

Thanks anyway for the help.

Cheers,

Peter

[asgallant]

Note that that solution will only work for browsers other than IE < 9; you need to use javascript to modify the contents of the iframe that holds the VML code used for them (and the VML code is structured differently than the SVG code, so you'll have to figure out the structure all over again there).