CODEWITHSUNDEEP
colorshighchartshover
pixeloco
pixeloco

Reputation: 275

highcharts: change color of pie slice on hover

when a slice of pie chart is hovered over i'd like it to change to the designated hover color, and then change back to its original color once the mouse is off that slice.

the documentation here (http://api.highcharts.com/highcharts#plotOptions.series.marker.states.hover) made it seem like the following would work, but i didn't have any luck:

http://jsfiddle.net/pixeloco/ztJkb/3/

plotOptions: {
   series: {
      marker: {
        states: {
          hover: {
            fillColor: 'black'
          }
        }
      }
   }
},

i found this solution http://jsfiddle.net/r6p7E/6/, but it requires that all slices be the same color. is there a way to have a multi-colored chart with slices that change color on hover?

Upvotes: 3

Views: 5395

Answers (1)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

Looks like you need these options:

    series: {
        states: {
            hover: {
                enabled: false
            }
        },
        point: {
            events: {
                mouseOver: function () {
                    this.options.oldColor = this.color;
                    this.graphic.attr("fill", "black");
                },
                mouseOut: function () {
                    this.graphic.attr("fill", this.options.oldColor);
                }
            }
        },
    }

FIDDLE EXAMPLE

Upvotes: 12

Related Questions