You can see point value in the pie center if you are hovering chart points. Also you can see total value if you stop hovering chart point. It'd like the same behavior, if you're hovering legend item.

const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
        load: function(){
            this.title.attr({text: this.series[0].total});
        },
      render: function() {
        this.series && this.title.attr({y: this.plotHeight / 2   this.plotTop   5});
      }
    }
  },
  title: {
    text: ''
  },
  legend: {
    enabled: true,
  },
  plotOptions: {
    pie: {
    showInLegend: true,
      innerSize: '50%',
      dataLabels: {
        enabled: false
      },
      point: {
        events: {
          mouseOver: function() {
            this.series.chart.title.attr({text: this.y});
          },
          mouseOut: function(){
            this.series.chart.title.attr({text: this.total});
          },
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
    }, {
      name: 'Firefox',
      y: 10.38
    }]
  }]
});

CodePudding user response：

You can add mouseover and mouseout event listeners on legend's elements and update the title in the same way as in point's events listeners. For example:

  chart: {
    type: 'pie',
    events: {
      load: function() {
        const series = this.series[0];
        this.title.attr({
          text: this.series[0].total
        });

        series.points.forEach(point => {
          ['label', 'symbol'].forEach(prop => {
            point.legendItem[prop].on('mouseover', () => {
              series.chart.title.attr({
                text: point.y
              });
            });

            point.legendItem[prop].on('mouseout', () => {
              series.chart.title.attr({
                text: point.total
              });
            });
          });
        });
      },
      ...
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/kq9vL7so/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#on