Irregular Timeseries in JavaScript

Using ApexCharts with JavaScript

This Irregular Timeseries 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 base = new Date('01 Jan 2025 GMT').getTime()
var ts1 = base
var ts2 = base + 86400000
var ts3 = base + 518400000

var dataSet = [[], [], []]

for (var i = 0; i < 12; i++) {
  ts1 = ts1 + 86400000
  var innerArr = [ts1, dataSeries[2][i].value]
  dataSet[0].push(innerArr)
}
for (var i = 0; i < 18; i++) {
  ts2 = ts2 + 86400000
  var innerArr = [ts2, dataSeries[1][i].value]
  dataSet[1].push(innerArr)
}
for (var i = 0; i < 12; i++) {
  ts3 = ts3 + 86400000
  var innerArr = [ts3, dataSeries[0][i].value]
  dataSet[2].push(innerArr)
}

var options = {
  series: [
    {
      name: 'Auth API',
      data: dataSet[0],
    },
    {
      name: 'Search API',
      data: dataSet[1],
    },
    {
      name: 'Media API',
      data: dataSet[2],
    },
  ],
  chart: {
    type: 'area',
    stacked: false,
    height: 350,
    zoom: {
      enabled: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  markers: {
    size: 0,
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100],
    },
  },
  yaxis: {
    labels: {
      style: {
        colors: '#8e8da4',
      },
      offsetX: 0,
      formatter: function (val) {
        return (val / 1000000).toFixed(1) + 'M'
      },
    },
    title: {
      text: 'Requests',
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  xaxis: {
    type: 'datetime',
    tickAmount: 8,
    min: new Date('01/01/2025').getTime(),
    max: new Date('01/20/2025').getTime(),
    labels: {
      rotate: -15,
      rotateAlways: true,
      format: 'dd MMM yyyy',
    },
  },
  title: {
    text: 'Requests by Service (irregular intervals)',
    align: 'left',
    offsetX: 14,
  },
  tooltip: {
    shared: true,
  },
  legend: {
    position: 'top',
    horizontalAlign: 'right',
    offsetX: -10,
  },
}

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