ApexCharts – Fixed Interval X-Axis DateTime for Line Chart

  apexcharts, charts, javascript, time

I am looking to set a fixed interval of datetime ranges on the x-axis in a fixed timezone(America/New_York).

I’ve tried using the formatted attribute and setting a tick amount, but I continue to end up with odd minute times rendered — I don’t have every minute capture. My goal is to display 10:00, 12:00, 2:00, 4:00 ET with the exact time shown via the tooltip.

My config is as such:

        const options = {
            chart: {
                id: 'datetime',
                type: 'line',
                toolbar: {
                    show: false
                }
            },
            stroke: {
                show: true,
                curve: 'smooth',
                width: 2
            },
            series: [{data: this.pricing}],
            xaxis: {
                min: this.intradayOpen,
                max: this.intradayClose,
                type: 'datetime',
                tickAmount: 6,
                labels: {
                    formatter: function (value, timestamp) {
                        let d = DateTime.fromMillis(timestamp).setZone("America/New_York");
                        return d.toLocaleString(DateTime.TIME_SIMPLE)
                    }
                }
            },
            yaxis: {
                decimalsInFloat: 2,
                tickAmount: 4,
                forceNiceScale: true,
            },
            tooltip: {
                marker: false,
                enabled: true,
                x: {
                    show: true,
                    format: 'MMM dd, yy hh:mm TT'
                },
                y: {
                    title: {
                        formatter: function () {
                            return "Price"
                        }
                    }
                }
            }
        }

Appreciate any help.

Source: Ask Javascript Questions

LEAVE A COMMENT