var options = {
  series: [
    {
      data: [
        {
          x: 'Engineering',
          y: [54, 66, 69, 75, 88],
          goals: [
            {
              value: 90,
              strokeWidth: 10,
              strokeHeight: 0,
              strokeLineCap: 'round',
              strokeColor: '#F283B6',
            },
            {
              value: 93,
              strokeWidth: 10,
              strokeHeight: 0,
              strokeLineCap: 'round',
              strokeColor: '#F283B6',
            },
          ],
        },
        {
          x: 'Sales',
          y: [43, 65, 69, 76, 81],
        },
        {
          x: 'Marketing',
          y: [31, 39, 45, 51, 59],
        },
        {
          x: 'Support',
          y: [39, 46, 55, 65, 71],
          goals: [
            {
              value: 30,
              strokeWidth: 10,
              strokeHeight: 0,
              strokeLineCap: 'round',
              strokeColor: '#F283B6',
            },
            {
              value: 32,
              strokeWidth: 10,
              strokeHeight: 0,
              strokeLineCap: 'round',
              strokeColor: '#F283B6',
            },
            {
              value: 76,
              strokeWidth: 10,
              strokeHeight: 0,
              strokeLineCap: 'round',
              strokeColor: '#F283B6',
            },
          ],
        },
        {
          x: 'Design',
          y: [41, 49, 58, 61, 67],
        },
      ],
    },
  ],
  chart: {
    type: 'boxPlot',
    height: 350,
  },
  title: {
    text: 'Salary Range by Department ($k)',
    align: 'left',
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '40%',
    },
    boxPlot: {
      colors: {
        upper: '#B6C454',
        lower: '#EDBFB7',
      },
    },
  },
  stroke: {
    colors: ['#333'],
  },
}

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