CODEWITHSUNDEEP
jqueryhighcharts
Oleksiy Chornobay
Oleksiy Chornobay

Reputation: 33

Increase pie chart size onhover with highcharts?

I am messing around with highcharts and was wondering if it was possible to increase the size of the pie chart upon hover? I've tried something like this:

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        size: 100,
        showInLegend: true,
        dataLabels: {
            enabled: false
        },
        hover: {
            pie: {
                size:200
            },
        },
    }
},

Upvotes: 1

Views: 2155

Answers (3)

Sphinxxx
Sphinxxx

Reputation: 13017

Resizing individual slices on hover using CSS:

.highcharts-pie-series .highcharts-point-hover,
.highcharts-pie-series:hover .highcharts-halo {
    transform-origin: (chart center coordinates);
    transform: scale(1.2, 1.2);
}

https://jsfiddle.net/k8wkt4dL/

Upvotes: 1

Kamil Kulig
Kamil Kulig

Reputation: 5826

You can update the size of the pie series in mouseOver / mouseOut events to achieve the desired result:

events: {
  mouseOver: function() {
    this.update({
      size: 300
    });
  },
  mouseOut: function() {
    this.update({
      size: 200
    });
  },
}

Live demo: http://jsfiddle.net/kkulig/vhh95L3d/

API reference: https://api.highcharts.com/class-reference/Highcharts.Series#update

Upvotes: 1

Deep 3015
Deep 3015

Reputation: 10075

Required effect can be achieved by updating

plotOptions: {
    pie: {
      ........
      states: {
        hover: {
          brightness: 0,
          halo: {
            opacity: 1
          }
        }
      }
    }
  },

Reference plotOptions.pie.states.hover

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares January, 2015 to May, 2015'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      },
      states: {
        hover: {
          brightness: 0,
          halo: {
            opacity: 1
          }
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    borderWidth: 2,
    borderColor: null,
    data: [{
      name: 'IE',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Other',
      y: 0.2
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Upvotes: 1

Related Questions