Search code examples
javascriptepochapexcharts

Apex Charts X Axis Datetime Epoch

I have been struggling for hours on this and can't seem to figure anything out, pulling my hair out on this one.

here is my data for the chart

var options = {
                chart: {
                    height: 350,
                    type: 'area',
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth'
                },
                colors: ["#FFB64D", "#FF5370"],
                series: [{
                    name: 'series1',
                    data: [0.3333333333333333, 0.5, 0.6, 0.5714285714285714]
                }],

                xaxis: {
                    type: 'datetime',
                    categories: [1641535200, 1641621600, 1641708000, 1641794400],
                },
                        }

            var chart = new ApexCharts(
                document.querySelector("#area-chart-1"),
                options
            );

            chart.render();

Here is my chart

Time stamps wrong

I can't seem to figure out why the date won't reflect correctly

I have also tried the following code, I have confirmed with a epoch calculator online that this is indeed the dates I am looking for, one time stamp a day with one value per time stamp.

var options = {
                chart: {
                    height: 350,
                    type: 'area',
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth'
                },
                markers: {
    size: 2,
},
                colors: ["#FFB64D", "#FF5370"],
                series: [{
                    name: 'series1',
                    data: [[1641513600, 0.3333333333333333], [1641600000, 0.5], [1641686400, 0.6], [1641772800, 0.5714285714285714]]
                }],

                xaxis: {
                    type: 'datetime',

                },
                tooltip: {
                    x: {
                        format: 'dd MMM yyyy'
                    }
                },

                        }

            var chart = new ApexCharts(
                document.querySelector("#area-chart-1"),
                options
            );

            chart.render();
Solution

  • Always good to check if you're looking for epoch or milliseconds, converted the times to * 1000 and fixed my issue.