Synchronized charts

When you have multiple charts with a common x-axis and significant difference in y values, it's a prevalent way to visualize it through synched charts.

In this Synchronized chart guide, we will go through the required setup to create such charts.

Setting Global Options

Multiple charts that share the same styles can use the global Apex variable to set the common options which are applied to all charts on the page.

window.Apex = {
  chart: {
    height: 160,
  },
  dataLabels: {
    enabled: false
  }
}

This will set the height of all the charts to 160px and turn off the data labels.

Setup individual charts

Each individual chart will have it's own element.

<div id="synced-charts">
  <div id="chart-line"></div>
  <div id="chart-area"></div>
</div>

Setting up the options for each chart.

There are some properties that are mandatory to correctly build the synced charts.

• chart.id should be a unique identifier.
• chart.group should be same for the charts which needs to be synced.
• yaxis.labels.minWidth should also be same for all the charts. Different width yaxis in different charts will produce incorrect results when hovering or interacting.

var optionsLine = {
  series: [{
    data: [...]
  }],
  colors: ['#00E396'],
  chart: {
    id: 'line-1',
    group: 'social',
    type: 'line',
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
var chart = new ApexCharts(el, optionsLine)
chart.render()

var optionsArea = {
  series: [{
    data: [...]
  }],
  colors: ['#008FFB'],
  chart: {
    id: 'area-1',
    group: 'social',
    type: 'area',
  },
  yaxis: {
    labels: {
      minWidth: 40
    }
  }
};
var chart = new ApexCharts(el, optionsArea)
chart.render()

That's it! Once you're done, you'll see 2 charts (a line and an area) and when you hover over them or zoom in/out in one of the charts, you will see the other one follows.

Checkout the full example on Syncing Charts demo.