Bug in the display of the chart component (x axis is not correctly aligned)

[alexisrc1]

Introduction

The x axis shifts and is not aligned with the displayed value (cf screenshot)

To Reproduce

in Postgresql

-- Create or replace the table
DROP TABLE IF EXISTS delete_table;
CREATE TABLE delete_table (
    x INTEGER NOT NULL,           -- Represents the hour
    y NUMERIC(10, 2) NOT NULL,    -- Represents the revenue at the hour
    series VARCHAR(50) NOT NULL   -- Represents the series (e.g., "last year", "this year")
);

-- Insert data into the table
INSERT INTO delete_table (x, y, series) VALUES
(10, 1.5, 'last year'),
(11, 1.7, 'last year'),
(10, 2.0, 'this year'),
(11, 1.9, 'this year'),
(12, 3.0, 'this year'),
(12, 2.5, 'last year'),
(13, 4.0, 'this year'),
(13, 3.5, 'last year'),
(14, 3.0, 'this year'),
(14, 7.5, 'last year'),
(15, 10.0, 'this year'),
(15, 1.5, 'last year'),
(16, 3.0, 'this year'),
(16, 5.5, 'last year'),
(17, 7.0, 'this year'),
(17, 8.5, 'last year'),
(18, 2.0, 'this year'),
(18, 2.5, 'last year'),
(19, 5.0, 'this year'),
(19, 3.5, 'last year'),
(20, 3.0, 'this year'),
(20, 6.5, 'last year'),
(21, 8.0, 'this year'),
(21, 3.5, 'last year');

-- chart component

SELECT 
    'chart' AS component,
    'bar' AS type,
    5 AS marker,
    True as labels,
    'Heures' AS xtitle,
    'Revenue (k€)' AS ytitle;

SELECT * from delete_table;

Screenshots

here is the result

Expected behavior

cf screenshot the bars are not well aligned with the xaxis tick

Version information

Postgresql

[lovasoa]

Thanks Alexis ! Reported upstream as apexcharts/apexcharts.js#4858

We'll keep this issue opened until this is fixed upstream.

[lovasoa]

In the meantime, I'll disable explicit tick numbering in SQLPage. This will give the following result, which is not perfect, but better than the current, clearly misleading behavior: