Open
Description
Description
In a line chart, datetime axis has millisecond-resolution when x is a Number but second-resolution when x is a Date. This results in weird charts as two different Y values are shown at the same x value, resulting in a vertical bar.
I think new Date(x).getTime == x so no precision should be lost by passing dates in a series instead of raw numbers.
I ran into this problem after MS Copilot suggested to use x: new Date(...). After switching to raw numbers everything worked as expected.
Steps to Reproduce
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reproducer</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
const chartOptions = {
chart: {
type: 'line',
height: 500
},
series: [
{
name: "Number",
data: [
{x: 1748924002000, y: 1 },
{x: 1748924002500, y: 2 },
{x: 1748924003000, y: 1 }
]
},
{
name: "Date",
data: [
{x: new Date(1748924002000), y: 1 },
{x: new Date(1748924002500), y: 2 },
{x: new Date(1748924003000), y: 1 }
]
}
],
xaxis: {
type: 'datetime'
}
};
const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
chart.render();
</script>
</body>Expected Behavior
{x: 1748924002500, y: 2 } and {x: new Date(1748924002500), y: 2 }, should be treated equally.
Actual Behavior
{x: new Date(1748924002500), y: 2 }, is rounded (?) to next second.
Screenshots
Reproduction Link
https://codepen.io/apexcharts/pen/bxzgZ gave me a 404 and I skipped this step. Full reproducer is above.