I am using the React version of ApexCharts in a web app and have already successfully applied it in several places. However, I am having some issues getting the x-axis data to line up with the x-axis labels in one chart. As you can see in the picture below, the data for 20 Mar is showing in the 21 Mar spot (there is no data for 21 Mar; there is no label for 21 Mar, just a tick mark). Every point is off by a day.
I have data coming in from an API that looks like this. Again, there is no data for 21 Mar:
{
"data": [
{
"mydataset": [
[
"2023-03-15 23:55:00+00:00",
738.8
],
[
"2023-03-16 23:55:00+00:00",
743.4
],
[
"2023-03-17 23:55:00+00:00",
757.9
],
[
"2023-03-18 23:55:00+00:00",
757.9
],
[
"2023-03-19 23:55:00+00:00",
757.9
],
[
"2023-03-20 23:55:00+00:00",
758.3
]
]
},
}
I have tried playing around with the ticks for the x-axis, but that does not seem to make any difference. What could be causing this issue and how can I resolve it? Here is the CodePen I created to illustrate this issue: https://codepen.io/jcbridwe/pen/ExeOxqG
