var options = {
  series: [
    {
      data: [
        {
          x: 'Junior',
          y: [42, 58],
        },
        {
          x: 'Mid',
          y: [58, 78],
        },
        {
          x: 'Senior',
          y: [78, 102],
        },
        {
          x: 'Lead',
          y: [95, 128],
        },
        {
          x: 'Manager',
          y: [110, 145],
        },
        {
          x: 'Director',
          y: [140, 185],
        },
        {
          x: 'VP',
          y: [175, 230],
        },
      ],
    },
  ],
  chart: {
    height: 350,
    type: 'rangeBar',
    zoom: {
      enabled: false,
    },
  },
  plotOptions: {
    bar: {
      isDumbbell: true,
      columnWidth: 3,
      dumbbellColors: [['#008FFB', '#00E396']],
    },
  },
  title: {
    text: 'Median Salary: 2020 vs 2025 by Role',
    align: 'left',
  },
  legend: {
    show: true,
    showForSingleSeries: true,
    position: 'top',
    horizontalAlign: 'left',
    customLegendItems: ['2020', '2025'],
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'vertical',
      gradientToColors: ['#00E396'],
      inverseColors: true,
      stops: [0, 100],
    },
  },
  grid: {
    xaxis: {
      lines: {
        show: true,
      },
    },
    yaxis: {
      lines: {
        show: false,
      },
    },
  },
  xaxis: {
    tickPlacement: 'on',
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return '$' + val + 'k'
      },
    },
  },
}

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