Highcharts - How do I move an icon inside each pie slice when the pie slice moves on hover?

debugcn Published at Dev

Simmy Dhanda

I have a pie chart which has a icon(html tags defining class-and positioned). When you hover over each pie slices the slice moves out correctly BUT the icon is fixed in the position. Is there a way to move the icon AS WELL?

This is showing the initial series code:

series: [{
  type: 'pie',
  color: '#FFFFFF',
  data: [{
    name: '<h3>Scheduling</h3>',
    y: 60,
    icon: '<i class="fa fa-book" style="cursor:pointer;font-size:80px;margin:-20px;"></i>'
  }]
}]

morganfree

You need to move the data label on hover point - the x, y of the move can be grabbed from point.slicedTranslation

example: https://jsfiddle.net/036j2uLs/

On mouse over, you need to animate the point in the same direction as the slice.

         mouseOver: function(event) {
        var point = this;

        if (!point.selected) {
          timeout = setTimeout(function() {
            const label = point.dataLabel;
            point.firePointEvent('click');

            point.series.points.forEach(point => {
              const label = point.dataLabel;
              if (label.sliced) {
                label.animate({
                  x: label.originX,
                  y: label.originY
                });
                label.sliced = false;
              }
            });

            if (!label.sliced) {
              const {
                translateX: tx,
                translateY: ty
              } = point.slicedTranslation;

              label.animate({
                x: label.originX + tx,
                y: label.originY + ty
              });
              label.sliced = true;
            }

            chart.tooltip.shared = false;
            chart.tooltip.refresh(point);
          }, 0);
        }
      }
    }

Record origin data labels position on load/redraw:

function setLabelOrigins() {
  this.series[0].points.forEach(point => {
    const label = point.dataLabel;
    label.originX = label.x;
    label.originY = label.y;
  });
}

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'modules',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie',
    backgroundColor: "transparent",
    events: {
      load: setLabelOrigins,
      redraw: setLabelOrigins
    }
  },

Collected from the Internet

Please contact [email protected] to delete if infringement.