var options = {
  series: [
    {
      name: 'box',
      type: 'boxPlot',
      data: [
        {
          x: 'us-east',
          y: [54, 66, 69, 75, 88],
          goals: [
            {
              value: 32,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
          ],
        },
        {
          x: 'us-west',
          y: [43, 65, 69, 76, 81],
          goals: [
            {
              value: 35,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 95,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
          ],
        },
        {
          x: 'eu-central',
          y: [31, 39, 45, 51, 59],
          goals: [
            {
              value: 64,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 75,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
          ],
        },
        {
          x: 'ap-south',
          y: [39, 46, 55, 65, 71],
          goals: [
            {
              value: 27,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 77,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
          ],
        },
        {
          x: 'sa-east',
          y: [29, 31, 35, 39, 44],
          goals: [
            {
              value: 10,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 56,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 62,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
            {
              value: 98,
              strokeWidth: 0,
              strokeHeight: 13,
              strokeLineCap: 'round',
              strokeColor: '#FEB019',
            },
          ],
        },
      ],
    },
  ],
  chart: {
    type: 'boxPlot',
    height: 350,
  },
  colors: ['#008FFB', '#FEB019'],
  title: {
    text: 'Request Latency by Region (ms)',
    align: 'left',
  },
  xaxis: {
    type: 'category',
  },
}

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