<template>
  <div>
    <div id="chart">
      <apexchart
        type="rangeBar"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      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],
            },
          ],
        },
      ],
      chartOptions: {
        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'
            },
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>