How to synchronize multiple highcharts on click event in angular5

[manhar-developer]

How to synchronize multiple highcharts on click event Refer code @ [a link] https://stackblitz.com/edit/angular-gjewfv?file=app/app.component.ts If one chart is clicked (drilled down), other chart also drill down in sync

                  **app.component.ts**
                import { Component, OnInit } from '@angular/core';
                import { Chart } from 'angular-highcharts';

                //component having two instances of chart


                @Component({
                  selector: 'my-app',
                  templateUrl: './app.component.html',
                  //styleUrls: ['./line-chart.component.css']
                })





                export class AppComponent implements OnInit {

                  constructor() { }

                 // Two instances chart and chart1 have been created. 
            //How to synchronize both chart and chart1 on click event so that the drill down property is syncronized.

                  chart = new Chart({
                    chart: { 
                      type: 'line',
                      zoomType: 'xy',
                    },
                    title: {
                      text: 'Linechart'
                    },
                    credits: {
                      enabled: false
                    },
                  series: [{
                  name: 'Operating Systems',
                  data: [
                    {
                      name: 'Windows',
                      y: 88.19,
                      drilldown: 'windows-versions'
                    },
                    ['MacOSX', 9.22],
                    ['Linux', 1.58],
                    ['Others', 1.01]
                  ]
                }],
                drilldown: {
                  series: [{
                    name: 'Windows versions',
                    id: 'windows-versions',
                    data: [
                      ['Win 7', 55.03],
                      ['Win XP', 15.83],
                      ['Win Vista', 3.59],
                      ['Win 8', 7.56],
                      ['Win 8.1', 6.18]
                    ]
                  }]
                }

                  });

        // Second instance of chart. It is of type pie.

                  chart1 = new Chart({

                    chart: {
                      type: 'pie',
                      options3d: {
                          enabled: true,
                          alpha: 45
                      }
                  },
                  title: {
                      text: 'Contents using Pie chart'
                  },
                  subtitle: {
                      text: '3D donut in Highcharts'
                  },
                  plotOptions: {
                      pie: {
                          innerSize: 100,
                          depth: 45
                      }
                  },
     // Data for the charts. Refer url for working example at 
//<https://stackblitz.com/edit/angular-gjewfv?file=app/app.component.ts> //which is having two charts . One is pie chart and other one is bar/line chart. //Both are having different instances inside the same component

-----------------------------------------------------------

                series: [{
                  name: 'Operating Systems',
                  data: [
                    {
                      name: 'Windows',
                      y: 88.19,
                      drilldown: 'windows-versions'
                    },
                    ['MacOSX', 9.22],
                    ['Linux', 1.58],
                    ['Others', 1.01]
                  ]
                }],

// data for drill down having drill down id which is required to update different set of data corresponding to the drill down id drilldown: { series: [{ name: 'Windows versions', id: 'windows-versions', data: [ ['Win 7', 55.03], ['Win XP', 15.83], ['Win Vista', 3.59], ['Win 8', 7.56], ['Win 8.1', 6.18] ]}]}

[CollinGraf314]

A rather simple way of doing this is to create a button that simply duplicates the chart that you wish the other to sync to, and then modify chart.options.chart.type to be what the charts original type was.

sudo code:

public syncCharts(): void {
    const options: Highcharts.Options = this.chartYouWishToDuplicate.options;
    options.chart.type = this.chartToBeSynced.options.chart.type;
    this.chartToBeSynced = new Chart(options);
}