How do i synchronize multiple(highcharts)charts in angular2

Question

i have a single component per chart. How can i synchronize the x-axis of these charts?

Chartone

    import {Component} from '@angular/core';
    import {ChartModule} from 'angular2-highcharts';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';


    @Component({
    selector: 'chartone',
    styles: [`
    :host{
      position: absolute;
      padding-top: 10px;
      padding-right: 10px;
    }
  `],
  template: `
   <chart [options]="options"
         (load)="saveInstance($event.context)">
  </chart>
     `
    })
       export class chartone {
  constructor() {

  this.options = {
            xAxis: {
            },
            yAxis:{
              plotLines: [{
                dashStyle: 'shortdot',
                color: 'green',
                value: '8', 
                width: '1.5',
                zIndex: 2 
              }]
            },

            credits: false,
            chart: {
              backgroundColor: '#e6f2ff',
              borderColor: '#00D490',
              borderWidth: 1,
              type: 'spline',
              width: 700,
              },
            legend: {
              enabled: false
              },
            title: { text : 'Overview'},
            series: [{ color: '#25D366', data: [2,3,5,8,13] },{ color: '#3b5998', data:[4,6,9,11,15]}]

          };

          setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 6000);
          setInterval(() => this.chart.series[1].addPoint(Math.random() * 10), 6000);

          chart   : Object;
          options : Object;

    }
    saveInstance(chartInstance) {
    this.chart = chartInstance;
    };
}

Charttwo

import {Component} from '@angular/core';
import {ChartModule} from 'angular2-highcharts';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';


@Component({
  selector: 'charttwo',
  styles: [`
    :host{
      position: absolute;
      padding-top: 10px;
      top: 410px;
      left: 610px;

    }
  `],
  template: `
  <chart [options]="options"
         (load)="saveInstance($event.context)">
  </chart>

  `
})
export class charttwo {
  constructor() {
  this.options = {
            credits: false,
            legend:{
              enabled:false,
            },
            yAxis:{
              plotBands: [{
                color: 'rgba(0,170,0,0.3)',
                from: 4, 
                to: 6, 
              }],
            },
            chart: {
              height: 300,
              backgroundColor: '#e6f2ff',
              borderColor: '#00D490',
              borderWidth: 1,
              type: 'scatter'

          },
            title: { text : 'Average'},
            series: [{ color: '#25D366', data: [2,3,5,8,13] }, {color: '#3b5998',data:[4,6,9,11,15]}]
          };

          setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 6000);
          setInterval(() => this.chart.series[1].addPoint(Math.random() * 10), 6000);
          chart   : Object;
          options : Object;

    }
    saveInstance(chartInstance) {
    this.chart = chartInstance;
    };
}

Finally there will be more then 2 charts to synchronize. How can i synchronize the x-axis of these charts?

EDIT: Example

Answer 1

you can also try

this.chart.addAxis({
    top: this.calculateHeightToDeductAsPercentage(selectedIndicator),
    height: this.getHeightOfIndicator(selectedIndicator),
    id: 'indicator_' + name,
    title: {
        text: '',
    },
    opposite: false,
    offset: 0
});
this.chart.addSeries({
    yAxis: 'indicator_' + name,
    type: 'momentum',
    name: name,
    color: color,
    linkedTo: 'stockPrice',
    params: {
        period: indicatorPeriod
    },
    dataGrouping: {
        enabled: false
    }
});

I added an indicator in this way. Hope this will work for you too.

Answer 2

I have a simplest solution for you with angular 2 / 2+

Just combine both the chart data into a same series, and split their yAxis. This is working for me. This below is my code. Put your data inside series: data, it will work.

      this.chartOption = {
            chart: {
              type: 'line',           
              zoomType: 'x',
              height: 600,                  

            //Theme of chart
              backgroundColor: "#18252E",
              style: {
                  fontFamily: '\'Unica One\', sans-serif'
              },
              plotBorderColor: '#606063'
            },
            title: {
              text: "",
               style: {
                display: 'none',
                color: '#E0E0E3',
                textTransform: 'uppercase',
                fontSize: '14px'
              }               
            },
            tooltip: {
              shared: true,  
              xDateFormat: '%m/%d/%Y',  
              valueDecimals: 2,
              crosshairs: true,
              backgroundColor: 'rgba(0, 0, 0, 0.85)',
                    style: {
                        color: '#F0F0F0'
                    }
            },          
          xAxis: {
          crosshair: true,
          type: 'datetime',
          dateTimeLabelFormats: {
            year: '%Y'
          }
        },
         yAxis: [{
                title: {
                    text: 'Data1'
                },
                height: 200,
                lineWidth: 2
            }, {
                title: {
                    text: 'Data2'
                },
                top: 300,
                height: 200,
                offset: 0,
                lineWidth: 2
            }],
          legend: {
                align: 'center',
                verticalAlign: 'top',
                layout: 'vertical',
                x: 30,
                y: 0,

               itemStyle: {
                 color: '#ffffff',
                 fontSize: '14px'
               }
          },

          plotOptions: {
              series: {
                  pointStart: 2010,
                  color: '#2B908F'
              }
          },

          series: [{
              name: "Data1",
              data: this.yourData1,
              yAxis : 0,
          },
          {
              name: "Data2",
              data: this.yourData2,
              color: '#90ee7e',
              yAxis : 1
          }]
      };    

A Plunker for you