var options = {
  series: [
    {
      name: 'North',
      data: [
        {
          x: 'Q1',
          y: 503,
        },
        {
          x: 'Q2',
          y: 580,
        },
        {
          x: 'Q3',
          y: 135,
        },
      ],
    },
    {
      name: 'South',
      data: [
        {
          x: 'Q1',
          y: 733,
        },
        {
          x: 'Q2',
          y: 385,
        },
        {
          x: 'Q3',
          y: 715,
        },
      ],
    },
    {
      name: 'East',
      data: [
        {
          x: 'Q1',
          y: 255,
        },
        {
          x: 'Q2',
          y: 211,
        },
        {
          x: 'Q3',
          y: 441,
        },
      ],
    },
    {
      name: 'West',
      data: [
        {
          x: 'Q1',
          y: 428,
        },
        {
          x: 'Q2',
          y: 749,
        },
        {
          x: 'Q3',
          y: 559,
        },
      ],
    },
  ],
  chart: {
    height: 350,
    width: 600,
    type: 'line',
  },
  plotOptions: {
    line: {
      isSlopeChart: true,
    },
  },
  title: {
    text: 'Regional Sales Rank by Quarter',
  },
  tooltip: {
    followCursor: true,
    intersect: false,
    shared: true,
  },
  dataLabels: {
    background: {
      enabled: true,
    },
    formatter(val, opts) {
      const seriesName = opts.w.config.series[opts.seriesIndex].name
      return val !== null ? seriesName : ''
    },
  },
  yaxis: {
    show: true,
    labels: {
      show: true,
    },
  },
  xaxis: {
    position: 'bottom',
  },
  legend: {
    show: true,
    position: 'top',
    horizontalAlign: 'left',
  },
  stroke: {
    width: [2, 3, 4, 2],
    dashArray: [0, 0, 5, 2],
    curve: 'smooth',
  },
}

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