var options = {
  series: [
    {
      name: 'us-east-1',
      data: [
        142,
        138,
        155,
        149,
        151,
        144,
        139,
        null,
        null,
        null,
        158,
        162,
        147,
        150,
        141,
        146,
      ],
    },
    {
      name: 'eu-west-1',
      data: [
        210,
        225,
        null,
        218,
        null,
        208,
        215,
        228,
        null,
        null,
        219,
        null,
        224,
        null,
        null,
        null,
      ],
    },
    {
      name: 'ap-south-1',
      data: [
        null,
        null,
        null,
        null,
        296,
        301,
        288,
        295,
        302,
        310,
        318,
        324,
        305,
        null,
        null,
        null,
      ],
    },
  ],
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false,
    },
    animations: {
      enabled: false,
    },
  },
  stroke: {
    width: [5, 5, 4],
    curve: 'smooth',
  },
  labels: [
    '2025-06-04T00:00:00',
    '2025-06-04T01:00:00',
    '2025-06-04T02:00:00',
    '2025-06-04T03:00:00',
    '2025-06-04T04:00:00',
    '2025-06-04T05:00:00',
    '2025-06-04T06:00:00',
    '2025-06-04T07:00:00',
    '2025-06-04T08:00:00',
    '2025-06-04T09:00:00',
    '2025-06-04T10:00:00',
    '2025-06-04T11:00:00',
    '2025-06-04T12:00:00',
    '2025-06-04T13:00:00',
    '2025-06-04T14:00:00',
    '2025-06-04T15:00:00',
  ],
  title: {
    text: 'API Response Time by Region',
  },
  subtitle: {
    text: 'Monitoring dropouts (null values) render as gaps',
  },
  xaxis: {
    type: 'datetime',
    labels: {
      format: 'HH:mm',
    },
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return val + ' ms'
      },
    },
  },
}

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