Repository navigation
Bug in the display of the chart component (x axis is not correctly aligned) reopened #733
Description
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
Activity
lovasoa commentedon Dec 10, 2024
Thanks Alexis ! Reported upstream as apexcharts/apexcharts.js#4858
We'll keep this issue opened until this is fixed upstream.
lovasoa commentedon Dec 10, 2024
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:
fix apexcharts bug
update apex charts
[-]Bug in the display of the chart component (x axis is not correctly aligned)[/-][+]Bug in the display of the chart component (x axis is not correctly aligned) reopened[/+]lovasoa commentedon Aug 3, 2025
this may be the same issue as #883
lovasoa commentedon Aug 3, 2025
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 commentedon Aug 5, 2025
@alexisrc1 : until the upstream issue is fixed, you can use the
xtickstop-level parameter to manually work around the issue:For instance, in your example above, you can add:
Screencast.From.2025-08-05.10-51-37.mp4
alexisrc1 commentedon Aug 5, 2025
Thanks Ophir ! I'll try it out asap
lovasoa commentedon Sep 9, 2026
Confirmed on current
main/ v0.46.1 with no missing or null data. Both series contain every x from 1 through 12:The data labels make the error visible: the x-axis labels
3,6, etc. are between their matching bar groups, and2,5,8, and11are 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 = 11avoids it, but the default axis remains misleading.