var options = {
  series: [
    {
      name: 'Revenue',
      type: 'column',
      data: [140, 200, 250, 150, 250, 280, 380, 460],
    },
    {
      name: 'Headcount',
      type: 'column',
      data: [110, 300, 310, 400, 410, 490, 650, 850],
    },
    {
      name: 'Share Price',
      type: 'line',
      data: [20, 29, 37, 36, 44, 45, 50, 58],
    },
  ],
  chart: {
    height: 350,
    type: 'line',
    stacked: false,
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: [1, 1, 4],
  },
  title: {
    text: 'Company Performance (2017 - 2024)',
    align: 'left',
    offsetX: 110,
  },
  xaxis: {
    categories: [2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024],
  },
  yaxis: [
    {
      seriesName: 'Revenue',
      axisTicks: {
        show: true,
      },
      axisBorder: {
        show: true,
        color: '#008FFB',
      },
      labels: {
        style: {
          colors: '#008FFB',
        },
      },
      title: {
        text: 'Revenue ($M)',
        style: {
          color: '#008FFB',
        },
      },
      tooltip: {
        enabled: true,
      },
    },
    {
      seriesName: 'Headcount',
      opposite: true,
      axisTicks: {
        show: true,
      },
      axisBorder: {
        show: true,
        color: '#00E396',
      },
      labels: {
        style: {
          colors: '#00E396',
        },
      },
      title: {
        text: 'Headcount',
        style: {
          color: '#00E396',
        },
      },
    },
    {
      seriesName: 'Share Price',
      opposite: true,
      axisTicks: {
        show: true,
      },
      axisBorder: {
        show: true,
        color: '#FEB019',
      },
      labels: {
        style: {
          colors: '#FEB019',
        },
      },
      title: {
        text: 'Share Price ($)',
        style: {
          color: '#FEB019',
        },
      },
    },
  ],
  tooltip: {
    fixed: {
      enabled: true,
      position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
      offsetY: 30,
      offsetX: 60,
    },
  },
  legend: {
    horizontalAlign: 'left',
    offsetX: 40,
  },
}

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