Compare two pie-charts with same data name (Highcharts)

Question

I'm very new to high charts and I am stuck. I have two pie charts with same data names but different values. What I am trying to achieve is get values from two pie charts when clicked on a pie slice and also to rotate the pie charts on click. Here is my JSFiddle and what I am trying to achieve is in the image URL below.

Image Link

And code is here

 var options = { chart: { renderTo: 'chart-wrap', animation: false, type: 'pie', backgroundColor: null, height: 450, events: { load: function() { } } }, colors: ['#0f5880', '#5db2cb', '#5c6a75', '#8aaeba', '#00b1b5', '#19315a'], credits: { enable: false }, title: { text: null }, tooltip: { valueSuffix: '%', enabled: false, formatter: function() { } }, plotOptions: { pie: { animation: { duration: 500, easing: 'easeOutQuad' }, shadow: false, center: ['50%', '50%'], cursor: 'pointer', dataLabels: { enabled: false }, point: { events: { click: function() { moveToPoint(this); selectedInfo(this.name, this.y); } } } }, series: { animation: { duration: 750, easing: 'easeOutQuad' } } }, series: [{ data: [{ name: 'Financial', y: 18.29 }, { name: 'Information Technology', y: 16.66 }, { name: 'Consumer Discretionary', y: 12.31 }, { name: 'Health Care', y: 11.17 }, { name: 'Industrials', y: 10.79 }, { name: 'Consumer Staples', y: 9.49 }, { name: 'Energy', y: 6.43 }, { name: 'Materials', y: 5.28 }, { name: 'Telecommunication Services', y: 3.31 }, { name: 'Real Estate', y: 3.14 }, { name: 'Utilities', y: 3.13 }], startAngle: 50, name: 'Pie 1', size: '104%', innerSize: '75%', center: ['20%', '50%'], events: { click: function() { } } }, { data: [{ name: 'Financial', y: 39.2 }, { name: 'Information Technology', y: 1.2 }, { name: 'Consumer Discretionary', y: 4.8 }, { name: 'Health Care', y: 7 }, { name: 'Industrials', y: 6.8 }, { name: 'Consumer Staples', y: 7 }, { name: 'Energy', y: 4.1 }, { name: 'Materials', y: 15.5 }, { name: 'Telecommunication Services', y: 3.5 }, { name: 'Real Estate', y: 8.2 }, { name: 'Utilities', y: 2.8 }], startAngle: -90, name: 'Pie 2', size: '37%', innerSize: '55%', center: ['80%', '50%'] }] }; var initChart = new Highcharts.Chart(options); var lastAngle = 0; var moveToPoint = function(clickPoint) { var points = clickPoint.series.points; var startAngle = 0; for (var i = 0; i < points.length; i++) { var p = points[i]; if (p === clickPoint) { break; } startAngle += (p.percentage / 100.0 * 360.0); } var newAngle = -startAngle + 90 - ((clickPoint.percentage / 100.0 * 360.0) / 2); $({ angle: 0, target: newAngle }).animate({ angle: newAngle - lastAngle }, { duration: 750, easing: 'easeOutQuad', step: function() { $(this).parents('.highcharts-series').css({ transform: 'rotateZ(' + this.angle + 'deg)' }); }, complete: function() { $(this).parents('.highcharts-series').css({ transform: 'rotateZ(0deg)' }); clickPoint.series.update({ startAngle: newAngle // center at 90 }); lastAngle = newAngle; } }); }; var selectedInfo = function(selectName, selectVal) { var selectedCategory = $('#selected-slice'); setTimeout (function() { selectedCategory.text(selectName +', '+ selectVal); }, 1000); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> 

JSFiddle

Answer 1

You should be able to use both of your series and update your two pie charts using point.events.click function:

  point: {
    events: {
      click: function() {
        var chart = this.series.chart,
          series = chart.series,
          index = this.index,
          name = this.name;
        if (lastIndex >= 0) {
          Highcharts.each(series, function(s) {
            s.data[lastIndex].update({
              dataLabels: {
                enabled: false
              }
            });
          })
        }
        Highcharts.each(series, function(s, i) {
          s.data[index].update({
            dataLabels: {
              enabled: true
            }
          });

          moveToPoint(s.data[index], i);
        });
        lastIndex = index;
        $('.customLabel').remove();
        chart.renderer.label(name, chart.chartWidth / 2 + 50, 100).attr({
          align: 'center',
          'font-size': 24
        }).addClass('customLabel').add();
      }
    }
  }

You should also be able to programatically fire click event on your charts load, using firePointEvent function:

var initChart = new Highcharts.Chart(options, function(chart) {
  chart.series[0].data[0].firePointEvent('click');
});

Live example: https://jsfiddle.net/p2wjwbeo/138/