Synchronized charts ApexCharts.js

by moviecrew

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.19.3/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="chart-holder">
  <div id="visitorVsLead" class="apex-line"></div>
</div>
<div class="chart-holder">
  <div id="chartConversion" class="apex-vert-bar"></div>
</div>

SCSS

$light: #F8F8F9;

.apex-line {
  width: 100%;

  .apexcharts-legend {
    background: $light;
    border-radius: 4px;
  }

  .apexcharts-legend-marker {
    margin-right: 6px;
  }
}

.apex-vert-bar {
  width: 100%;

  .apexcharts-legend {
    background: $light;
    border-radius: 4px;
  }

  .apexcharts-legend-marker {
    margin-right: 6px;
  }
}

JavaScript

var optionsVisitorLead = {
  series: [{
      name: "Total visitors",
      data: [{
          x: "02-10-2020 GMT",
          y: 34000
        },
        {
          x: "02-11-2020 GMT",
          y: 43000
        },
        {
          x: "02-12-2020 GMT",
          y: 31000
        },
        {
          x: "02-13-2020 GMT",
          y: 43000
        },
        {
          x: "02-14-2020 GMT",
          y: 33000
        },
        {
          x: "02-15-2020 GMT",
          y: 52000
        },
        {
          x: "02-16-2020 GMT",
          y: 34000
        },
        {
          x: "02-17-2020 GMT",
          y: 43000
        },
        {
          x: "02-18-2020 GMT",
          y: 31000
        },
        {
          x: "02-19-2020 GMT",
          y: 43000
        },
        {
          x: "02-20-2020 GMT",
          y: 33000
        },
        {
          x: "02-21-2020 GMT",
          y: 52000
        }
      ]
    },
    {
      name: "Total leads",
      data: [{
          x: "02-10-2020 GMT",
          y: 12000
        },
        {
          x: "02-11-2020 GMT",
          y: 33000
        },
        {
          x: "02-12-2020 GMT",
          y: 12000
        },
        {
          x: "02-13-2020 GMT",
          y: 23000
        },
        {
          x: "02-14-2020 GMT",
          y: 12000
        },
        {
          x: "02-15-2020 GMT",
          y: 23000
        },

        {
          x: "02-16-2020 GMT",
          y: 12000
        },
        {
          x: "02-17-2020 GMT",
          y: 33000
        },
        {
          x: "02-18-2020 GMT",
          y: 12000
        },
        {
          x: "02-19-2020 GMT",
          y: 23000
        },
        {
          x: "02-20-2020 GMT",
          y: 12000
        },
        {
          x: "02-21-2020 GMT",
          y: 23000
        }
      ]
    },
  ],
  chart: {
    height: 350,
    id: 'lineChartGroup',
    group: 'visitorsLeads',
    type: 'line',
    zoom: {
      enabled: false
    },
   ...