From 735a2660e598451d1b3470c06edb515433b33404 Mon Sep 17 00:00:00 2001 From: ia319 Date: Thu, 16 Oct 2025 16:35:34 +0800 Subject: [PATCH 1/4] fix(xychart): fix y-axis tick positioning (#7061) add condition to handle vertical axes ('left' or 'right') ensure: - top padding remain for visual spacing - bottom padding remove to align zero tick with chart base --- .../diagrams/xychart/chartBuilder/components/axis/baseAxis.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index ef60cc85fd1..36d7df5f85a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -46,6 +46,10 @@ export abstract class BaseAxis implements Axis { } getRange(): [number, number] { + if (this.axisPosition === 'left' || this.axisPosition === 'right') { + // do not apply outer padding to the bottom of the y-axis + return [this.range[0] + this.outerPadding, this.range[1]]; + } return [this.range[0] + this.outerPadding, this.range[1] - this.outerPadding]; } From 2c20e6f485ffe70613e6eb323ea16fe50927be38 Mon Sep 17 00:00:00 2001 From: ia319 Date: Thu, 16 Oct 2025 17:45:14 +0800 Subject: [PATCH 2/4] fix(xychart): correct axis margin handling for vertical and horizontal charts add isBandAxis property to BaseAxis to distinguish axis types and apply padding correctly for different axes - add isBandAxis property to BaseAxis to distinguish axis types - apply padding on both ends for band (categorical) axes - align start of linear axes with other axis and apply padding at the end --- .../xychart/chartBuilder/components/axis/bandAxis.ts | 1 + .../xychart/chartBuilder/components/axis/baseAxis.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts index 98eb31235de..6e14aad8b69 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/bandAxis.ts @@ -17,6 +17,7 @@ export class BandAxis extends BaseAxis { textDimensionCalculator: TextDimensionCalculator ) { super(axisConfig, title, textDimensionCalculator, axisThemeConfig); + this.isBandAxis = true; this.categories = categories; this.scale = scaleBand().domain(this.categories).range(this.getRange()); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index 36d7df5f85a..288ab04f258 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -23,6 +23,7 @@ export abstract class BaseAxis implements Axis { protected outerPadding = 0; protected titleTextHeight = 0; protected labelTextHeight = 0; + protected isBandAxis = false; constructor( protected axisConfig: XYChartAxisConfig, @@ -46,11 +47,16 @@ export abstract class BaseAxis implements Axis { } getRange(): [number, number] { + if (this.isBandAxis) { + return [this.range[0] + this.outerPadding, this.range[1] - this.outerPadding]; + } + // This is a value axis if (this.axisPosition === 'left' || this.axisPosition === 'right') { - // do not apply outer padding to the bottom of the y-axis + // For vertical value axis, no padding at the bottom return [this.range[0] + this.outerPadding, this.range[1]]; } - return [this.range[0] + this.outerPadding, this.range[1] - this.outerPadding]; + // For horizontal value axis, padding only at the end + return [this.range[0], this.range[1] - this.outerPadding]; } setAxisPosition(axisPosition: AxisPosition): void { From ab5f22a25db0e575d35f8d7e38a53ae77322867c Mon Sep 17 00:00:00 2001 From: ia319 Date: Sun, 19 Oct 2025 16:12:57 +0800 Subject: [PATCH 3/4] fix(barPlot): correct width logic when x-axis is value axis and add type adaptation fix first bar overflow when bottom axis is value axis. check if x-axis is category axis: - if yes, apply original width logic - if no, set barWidthHalf = 0 and adjust total width to fit extra half bar --- .../chartBuilder/components/axis/index.ts | 1 + .../chartBuilder/components/plot/barPlot.ts | 24 +++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index a1ec492f613..a86cfe4fd2f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -19,6 +19,7 @@ export interface Axis extends ChartComponent { getTickDistance(): number; recalculateOuterPaddingToDrawBar(): void; setRange(range: [number, number]): void; + isBandAxis: boolean; } export function getAxis( diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts index cf7d4e516de..5f4ce1d1787 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts @@ -19,11 +19,27 @@ export class BarPlot { const barPaddingPercent = 0.05; - const barWidth = - Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * - (1 - barPaddingPercent); - const barWidthHalf = barWidth / 2; + let barWidth: number; + let barWidthHalf: number; + // Axis at the bottom of the bar + let bandAxis: Axis; + if (this.yAxis.isBandAxis) { + bandAxis = this.yAxis; + } else { + bandAxis = this.xAxis; + } + + if (bandAxis.isBandAxis) { + barWidth = + Math.min(bandAxis.getAxisOuterPadding() * 2, bandAxis.getTickDistance()) * + (1 - barPaddingPercent); + barWidthHalf = barWidth / 2; + } else { + // For value axis, keep bars aligned and adjust width for extra half bar + barWidth = Math.min(bandAxis.getAxisOuterPadding() * 2, bandAxis.getTickDistance()) * 0.5; + barWidthHalf = 0; + } if (this.orientation === 'horizontal') { return [ { From 4bc2db31d767a61420156aae77fbd2a4dc3a811b Mon Sep 17 00:00:00 2001 From: ia319 Date: Sun, 19 Oct 2025 16:22:55 +0800 Subject: [PATCH 4/4] fix ts error --- .../diagrams/xychart/chartBuilder/components/axis/baseAxis.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index 288ab04f258..eb7c0d34faa 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -23,7 +23,7 @@ export abstract class BaseAxis implements Axis { protected outerPadding = 0; protected titleTextHeight = 0; protected labelTextHeight = 0; - protected isBandAxis = false; + public isBandAxis = false; constructor( protected axisConfig: XYChartAxisConfig,