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

[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:

[lovasoa]

this may be the same issue as #883

[lovasoa]

The issue is reported upstream as apexcharts/apexcharts.js#4858

It was marked as fixed, but actually is not: apexcharts/apexcharts.js#4858 (comment)

@alexisrc1 , we should find a way to collaborate with @junedchhipa 🚀

[lovasoa]

@alexisrc1 : until the upstream issue is fixed, you can use the xticks top-level parameter to manually work around the issue:

For instance, in your example above, you can add:

    (select count(distinct x) from delete_table)-1 as xticks,

Screencast.From.2025-08-05.10-51-37.mp4

[alexisrc1]

Thanks Ophir ! I'll try it out asap

[lovasoa]

Confirmed on current main / v0.46.1 with no missing or null data. Both series contain every x from 1 through 12:

SELECT 'chart' AS component,
       'Every bar label equals its x value' AS title,
       'bar' AS type, TRUE AS labels;
WITH RECURSIVE x(x) AS (
    VALUES (1)
    UNION ALL SELECT x + 1 FROM x WHERE x < 12
)
SELECT 'A' AS series, x, x AS y FROM x
UNION ALL
SELECT 'B', x, x FROM x;

The data labels make the error visible: the x-axis labels 3, 6, etc. are between their matching bar groups, and 2, 5, 8, and 11 are omitted. ApexCharts auto-selects 7 intervals for the integer range 1..12, then displays the fractional ticks (2.57, 4.14, 5.71, ...) rounded as integers. xticks = 11 avoids it, but the default axis remains misleading.