Description

In every XY Chart, the 0 point of the chart is located visibly higher than the lowest point of the bars, even though the range is set to start from 0. For example when the y-axis' range goes from 0 to 50, the bars seem to start from the point -1.

Steps to reproduce

1. Make an XY chart with Mermaid (I used the example from Mermaid's own site - Diagram Syntax > XY Chart > "Setting Colors for Lines and Bars").

The same problem also occurs in the example image on the site, so the detailed steps don't matter as long as you are creating an XY chart.

Screenshots

Code Sample

---
config:
  themeVariables:
    xyChart:
      plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
---
xychart
title "Different Colors in xyChart"
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
y-axis "valuesY" 0 --> 50
%% Black line
line [10,20,30,40]
%% Blue bar
bar [20,30,25,35]
%% Green bar
bar [15,25,20,30]
%% Red line
line [5,15,25,35]

Setup

• Mermaid version: 11.12.0
• Browser and Version: Chrome 141.0.7390.55

Suggested Solutions

The number zero could be marked at the bottom of the y-axis.

Additional Context

The same error also occurs with different inputs. By changing the numerical values, you can affect how much the 0 point of the y-axis is distorted. When the scale is reduced, for example to [0-5], the bars appear to start from a value closer to zero. On the other hand, when the scale is increased, the bars appear to start further from zero. For example, when the y-axis' scale is [0-200], the bars would appear to start at approximately -4.