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().
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()