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: 'Gateway 1',
      data: [
        {
          x: 'Dec 23 2024',
          y: null,
        },
        {
          x: 'Dec 24 2024',
          y: 44,
        },
        {
          x: 'Dec 25 2024',
          y: 31,
        },
        {
          x: 'Dec 26 2024',
          y: 38,
        },
        {
          x: 'Dec 27 2024',
          y: null,
        },
        {
          x: 'Dec 28 2024',
          y: 32,
        },
        {
          x: 'Dec 29 2024',
          y: 55,
        },
        {
          x: 'Dec 30 2024',
          y: 51,
        },
        {
          x: 'Dec 31 2024',
          y: 67,
        },
        {
          x: 'Jan 01 2025',
          y: 22,
        },
        {
          x: 'Jan 02 2025',
          y: 34,
        },
        {
          x: 'Jan 03 2025',
          y: null,
        },
        {
          x: 'Jan 04 2025',
          y: null,
        },
        {
          x: 'Jan 05 2025',
          y: 11,
        },
        {
          x: 'Jan 06 2025',
          y: 4,
        },
        {
          x: 'Jan 07 2025',
          y: 15,
        },
        {
          x: 'Jan 08 2025',
          y: null,
        },
        {
          x: 'Jan 09 2025',
          y: 9,
        },
        {
          x: 'Jan 10 2025',
          y: 34,
        },
        {
          x: 'Jan 11 2025',
          y: null,
        },
        {
          x: 'Jan 12 2025',
          y: null,
        },
        {
          x: 'Jan 13 2025',
          y: 13,
        },
        {
          x: 'Jan 14 2025',
          y: null,
        },
      ],
    },
  ],
  chart: {
    type: 'area',
    height: 350,
    animations: {
      enabled: false,
    },
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'straight',
  },
  fill: {
    type: 'gradient',
    gradient: {
      opacityFrom: 0.5,
      opacityTo: 0.1,
    },
  },
  markers: {
    size: 5,
    hover: {
      size: 9,
    },
  },
  title: {
    text: 'Sensor Uptime',
  },
  subtitle: {
    text: 'Dropped readings (null values) leave gaps in the area',
  },
  tooltip: {
    intersect: true,
    shared: false,
  },
  xaxis: {
    type: 'datetime',
  },
  yaxis: {
    title: {
      text: 'Throughput (Mbps)',
    },
  },
}

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