Chart Component bar type - Inconsistent rounding when stacked is true and only one serie is present

[remi-coscoy]

Introduction

When creating a stacked bar chart, the top of the bar is sometimes not rounded and sometimes is. This happens when there only are values for one of the series.

To Reproduce

This following sql code reproduces the chart:

SELECT
    'chart'                 AS component,
    'bar'                   AS type,
    'Planning Client'       AS title,
    'Heure de la journée'   AS xtitle,
    '% de Consommation'     AS ytitle,
    TRUE                    AS stacked,
    TRUE                    AS toolbar,
    'yellow'                AS color, -- Color for the first series ('HP')
    'blue'                  AS color;  -- Color for the second series ('HC')
SELECT
    series,
    x,
    y
FROM (
    VALUES
        -- 'Heures Pleines' (HP) Data
        ('HP', 7, 4.2),
        ('HP', 8, 4.2),
        ('HP', 9, 4.2),
        ('HP', 10, 4.2),
        ('HP', 11, 4.2),
        ('HP', 12, 4.2),
        ('HP', 13, 4.2),
        ('HP', 14, 4.2),
        ('HP', 15, 4.2),
        ('HP', 16, 4.2),
        ('HP', 17, 4.2),
        ('HP', 18, 4.2),
        ('HP', 19, 4.2),
        ('HP', 20, 4.2),

        -- 'Heures Creuses' (HC) Data
        ('HC', 0, 4.2),
        ('HC', 1, 4.2),
        ('HC', 2, 4.2),
        ('HC', 3, 4.2),
        ('HC', 4, 4.2),
        ('HC', 5, 4.2),
        ('HC', 6, 4.2),
        ('HC', 21, 4.2),
        ('HC', 22, 4.2),
        ('HC', 23, 4.2)
) AS data(series, x, y);

Actual behavior

Some of the bar have their top rounded, some don't.

Screenshots

Expected behavior

Consistent rounding of the top of the bars

Version information

• OS: Ubuntu 24.04.3
• Database: Postgresql 16.9
• SQLPage Version [found when hovering the default footer of pages]: 0.35.2

Additional context

Add any other context about the problem here.

[lovasoa]

Hi Rémi ! Thanks for the report.

I can reproduce the issue with

SELECT
    'chart'                 AS component,
    'bar'                   AS type,
    TRUE                    AS stacked
SELECT 'A' as series, 1 as x, 1 as y;
SELECT 'B' as series, 2 as x, 1 as y;

It can be worked around by explicitly including zero values in your chart:

SELECT
    'chart'                 AS component,
    'bar'                   AS type,
    TRUE                    AS stacked
SELECT 'A' as series, 1 as x, 1 as y;
SELECT 'B' as series, 1 as x, 0 as y;
SELECT 'B' as series, 2 as x, 1 as y;
SELECT 'B' as series, 2 as x, 0 as y;

If your source data is in a table named src missing the zero values, you can compute them in sql using something like

WITH series_list AS (SELECT DISTINCT series FROM src),
    x_list AS (SELECT DISTINCT x FROM src),
    grid AS (
        SELECT s.series, x_list.x
        FROM series_list s
        CROSS JOIN x_list
    )
SELECT g.series, g.x, COALESCE(s.y, 0) AS y
FROM grid g
LEFT JOIN src s ON g.series = s.series AND g.x = s.x
order by g.series, g.x;

[lovasoa]

The bug has been reported to the underlying chart library at https://github.com/apexcharts/apexcharts.js/issues/5090

[remi-coscoy]

Thanks for the work around and the report! I implemented it and I got the expected chart.

[lovasoa]

Let's keep this open until the underlying issue is solved