Missing / Null Values in JavaScript

Using ApexCharts with JavaScript

This Missing / Null Values example uses ApexCharts.js directly in JavaScript, with no wrapper component.

Install it with npm install apexcharts, then mount the chart with new ApexCharts(element, options).render().

JavaScript installation guide
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()