var options = {
  series: [
    {
      name: 'Sessions',
      type: 'area',
      data: [440, 550, 310, 470, 310, 430, 260, 410, 310, 470, 330],
    },
    {
      name: 'Conversions',
      type: 'line',
      data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43],
    },
  ],
  chart: {
    height: 350,
    type: 'line',
  },
  stroke: {
    curve: 'smooth',
  },
  fill: {
    type: 'solid',
    opacity: [0.35, 1],
  },
  labels: [
    'Dec 01',
    'Dec 02',
    'Dec 03',
    'Dec 04',
    'Dec 05',
    'Dec 06',
    'Dec 07',
    'Dec 08',
    'Dec 09 ',
    'Dec 10',
    'Dec 11',
  ],
  markers: {
    size: 0,
  },
  title: {
    text: 'Sessions vs Conversions',
  },
  yaxis: [
    {
      title: {
        text: 'Sessions',
      },
    },
    {
      opposite: true,
      title: {
        text: 'Conversions',
      },
    },
  ],
  tooltip: {
    shared: true,
    intersect: false,
    y: {
      formatter: function (y) {
        if (typeof y !== 'undefined') {
          return y.toFixed(0)
        }
        return y
      },
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()