How can you change the cursor icon to signify an areas on a Google Chart is clickable?

Question

I know it is possible to change the cursor icon for a google pie chart, but can it be done for individual sectors of that pie chart?

I would like to be able to show a ch

Answer 1

It's kind of a hack, but I made something up for this that makes a lot of assumptions.

Google charts doesn't let you put specific CSS on a pie chart piece, but it just renders SVG tags, so you can apply styles to the SVG directly.

The following style rules make a pointer cursor on any element that is a path, or a sibling of a path, which for a vanilla pie chart setup is only the pie slices. The rule is also restricted by the ID so it isn't going to go messing with other SVG graphics on the same page.

The biggest assumption made here is that you want all pie segments to be clickable.

  <style>
    #myChart path {cursor:pointer;}
    #myChart path ~ text {cursor:pointer;}
  </style>

You could make a variation on this that applies the style by the colour of the pie segment like so:

  <style>
    #myChart path[fill="#3366cc"] {cursor:pointer;}
    #myChart path[fill="#3366cc"] ~ text {cursor:pointer;}
  </style>