From cc5190c1baa0bcda51c3245cdf33ba75c231e399 Mon Sep 17 00:00:00 2001
From: Subhash Halder <halder.subhash@gmail.com>
Date: Sun, 3 Sep 2023 13:38:47 +0530
Subject: [PATCH] Fix some space management issue

---
 demos/xychart.html                            |  11 ++
 docs/syntax/xyChart.md                        |  31 ++--
 packages/mermaid/src/config.type.ts           |  28 +++-
 .../xychart/chartBuilder/Interfaces.ts        |  10 +-
 .../xychart/chartBuilder/Orchestrator.ts      |  22 +--
 .../chartBuilder/components/ChartTitle.ts     |   4 +-
 .../chartBuilder/components/axis/BaseAxis.ts  | 135 ++++++++++++++----
 .../chartBuilder/components/plot/index.ts     |  10 +-
 .../src/diagrams/xychart/xychartRenderer.ts   |  14 +-
 packages/mermaid/src/docs/syntax/xyChart.md   |  29 ++--
 .../mermaid/src/schemas/config.schema.yaml    |  18 ++-
 packages/mermaid/src/themes/theme-base.js     |   2 +
 packages/mermaid/src/themes/theme-dark.js     |   2 +
 packages/mermaid/src/themes/theme-default.js  |   2 +
 packages/mermaid/src/themes/theme-forest.js   |   2 +
 packages/mermaid/src/themes/theme-neutral.js  |   2 +
 16 files changed, 232 insertions(+), 90 deletions(-)

diff --git a/demos/xychart.html b/demos/xychart.html
index 4fc3a1249..0d0bd8d00 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -92,6 +92,17 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
+    <h1>XY Charts demos</h1>
+    <pre class="mermaid">
+    %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
     <hr />
 
     <script type="module">
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 6ec12e9fe..477473156 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -110,23 +110,24 @@ Every grammer are optional other than the chart name and one data set, so you wi
 | showTitle                | Title to be shown or not                       |     true      |
 | xAxis                    | xAxis configuration                            |  AxisConfig   |
 | yAxis                    | yAxis configuration                            |  AxisConfig   |
-| plotBorderWidth          | Width of the border around the plot            |       2       |
 | chartOrientation         | ('vertical' or 'horizontal')                   |  'vertical'   |
 | plotReservedSpacePercent | Minimum space plots will take inside the chart |      50       |
 
 ### AxisConfig
 
-| Parameter     | Description                                  | Default value |
-| ------------- | -------------------------------------------- | :-----------: |
-| showLabel     | Show axis labels or tick values              |     true      |
-| labelFontSize | Font size of the label to be drawn           |      14       |
-| labelPadding  | Top and Bottom padding of the label          |       5       |
-| showTitle     | Axis title to be shown or not                |     true      |
-| titleFontSize | Axis title font size                         |      16       |
-| titlePadding  | Top and Bottom padding of Axis title         |       5       |
-| showTick      | Tick along with the label to be shown or not |     true      |
-| tickLength    | How long the tick will be                    |       5       |
-| tickWidth     | How width the tick will be                   |       2       |
+| Parameter     | Description                          | Default value |
+| ------------- | ------------------------------------ | :-----------: |
+| showLabel     | Show axis labels or tick values      |     true      |
+| labelFontSize | Font size of the label to be drawn   |      14       |
+| labelPadding  | Top and Bottom padding of the label  |       5       |
+| showTitle     | Axis title to be shown or not        |     true      |
+| titleFontSize | Axis title font size                 |      16       |
+| titlePadding  | Top and Bottom padding of Axis title |       5       |
+| showTick      | Tick to be shown or not              |     true      |
+| tickLength    | How long the tick will be            |       5       |
+| tickWidth     | How width the tick will be           |       2       |
+| showAxisLine  | Axis line to be shown or not         |     true      |
+| axisLineWidth | Thickness of the axis line           |       2       |
 
 ## Chart Theme Variables
 
@@ -142,15 +143,17 @@ Every grammer are optional other than the chart name and one data set, so you wi
 | xAxisLableColor  | Color of the x-axis labels                             |
 | xAxisTitleColor  | Color of the x-axis title                              |
 | xAxisTickColor   | Color of the x-axis tick                               |
+| xAxisLineColor   | Color of the x-axis line                               |
 | yAxisLableColor  | Color of the y-axis labels                             |
 | yAxisTitleColor  | Color of the y-axis title                              |
 | yAxisTickColor   | Color of the y-axis tick                               |
+| yAxisLineColor   | Color of the y-axis line                               |
 | plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] |
 
 ## Example on config and theme
 
 ```mermaid-example
-%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -160,7 +163,7 @@ xychart-beta
 ```
 
 ```mermaid
-%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 77e3dbeb6..be20f2a4d 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -747,6 +747,14 @@ export interface XYChartAxisConfig {
    * width of the axis tick lines
    */
   tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
 }
 /**
  * This object contains configuration specific to XYCharts
@@ -777,10 +785,6 @@ export interface XYChartConfig extends BaseDiagramConfig {
   showTitle?: boolean;
   xAxis?: XYChartAxisConfig1;
   yAxis?: XYChartAxisConfig2;
-  /**
-   * width of the line around the plot of the chart
-   */
-  plotBorderWidth?: number;
   /**
    * How to plot will be drawn horizontal or vertical
    */
@@ -830,6 +834,14 @@ export interface XYChartAxisConfig1 {
    * width of the axis tick lines
    */
   tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
 }
 /**
  * This object contains configuration for XYChart axis config
@@ -871,6 +883,14 @@ export interface XYChartAxisConfig2 {
    * width of the axis tick lines
    */
   tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
 }
 /**
  * The object containing configurations specific for entity relationship diagrams
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
index e23374aca..33eb4f227 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -2,6 +2,7 @@ export interface XYChartAxisThemeConfig {
   titleColor: string;
   labelColor: string;
   tickColor: string;
+  axisLineColor: string;
 }
 
 export interface XYChartThemeConfig {
@@ -11,9 +12,11 @@ export interface XYChartThemeConfig {
   xAxisLableColor: string;
   xAxisTitleColor: string;
   xAxisTickColor: string;
+  xAxisLineColor: string;
   yAxisLableColor: string;
   yAxisTitleColor: string;
   yAxisTickColor: string;
+  yAxisLineColor: string;
   plotColorPalette: string;
 }
 
@@ -81,6 +84,8 @@ export interface XYChartAxisConfig {
   showTick: boolean;
   tickLength: number;
   tickWidth: number;
+  showAxisLine: boolean;
+  axisLineWidth: number;
 }
 
 export interface XYChartConfig {
@@ -91,7 +96,6 @@ export interface XYChartConfig {
   showTitle: boolean;
   xAxis: XYChartAxisConfig;
   yAxis: XYChartAxisConfig;
-  plotBorderWidth: number;
   chartOrientation: 'vertical' | 'horizontal';
   plotReservedSpacePercent: number;
 }
@@ -115,8 +119,8 @@ export interface Point {
   y: number;
 }
 
-export type TextVerticalPos = 'left' | 'center' | 'right';
-export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
+export type TextHorizontalPos = 'left' | 'center' | 'right';
+export type TextVerticalPos = 'top' | 'middle' | 'bottom';
 
 export interface RectElem extends Point {
   width: number;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
index b89d1c94e..b008c9a29 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -32,6 +32,7 @@ export class Orchestrator {
           titleColor: chartThemeConfig.xAxisTitleColor,
           labelColor: chartThemeConfig.xAxisLableColor,
           tickColor: chartThemeConfig.xAxisTickColor,
+          axisLineColor: chartThemeConfig.xAxisLineColor,
         },
         tmpSVGGElem
       ),
@@ -42,6 +43,7 @@ export class Orchestrator {
           titleColor: chartThemeConfig.yAxisTitleColor,
           labelColor: chartThemeConfig.yAxisLableColor,
           tickColor: chartThemeConfig.yAxisTickColor,
+          axisLineColor: chartThemeConfig.yAxisLineColor,
         },
         tmpSVGGElem
       ),
@@ -94,11 +96,11 @@ export class Orchestrator {
       chartHeight += availableHeight;
       availableHeight = 0;
     }
-    const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
-    plotX += plotBorderWidthHalf;
-    plotY += plotBorderWidthHalf;
-    chartWidth -= this.chartConfig.plotBorderWidth;
-    chartHeight -= this.chartConfig.plotBorderWidth;
+    // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
+    // plotX += plotBorderWidthHalf;
+    // plotY += plotBorderWidthHalf;
+    // chartWidth -= this.chartConfig.plotBorderWidth;
+    // chartHeight -= this.chartConfig.plotBorderWidth;
     this.componentStore.plot.calculateSpace({
       width: chartWidth,
       height: chartHeight,
@@ -166,11 +168,11 @@ export class Orchestrator {
       chartHeight += availableHeight;
       availableHeight = 0;
     }
-    const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
-    plotX += plotBorderWidthHalf;
-    plotY += plotBorderWidthHalf;
-    chartWidth -= this.chartConfig.plotBorderWidth;
-    chartHeight -= this.chartConfig.plotBorderWidth;
+    // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
+    // plotX += plotBorderWidthHalf;
+    // plotY += plotBorderWidthHalf;
+    // chartWidth -= this.chartConfig.plotBorderWidth;
+    // chartHeight -= this.chartConfig.plotBorderWidth;
     this.componentStore.plot.calculateSpace({
       width: chartWidth,
       height: chartHeight,
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
index 7a5bcf341..99ccbb6da 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -64,8 +64,8 @@ export class ChartTitle implements ChartComponent {
           {
             fontSize: this.chartConfig.titleFontSize,
             text: this.chartData.title,
-            verticalPos: 'center',
-            horizontalPos: 'middle',
+            verticalPos: 'middle',
+            horizontalPos: 'center',
             x: this.boundingRect.x + this.boundingRect.width / 2,
             y: this.boundingRect.y + this.boundingRect.height / 2,
             fill: this.chartThemeConfig.titleColor,
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 7bbaf5749..873455a3f 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
@@ -20,6 +20,7 @@ export abstract class BaseAxis implements Axis {
   protected showTitle = false;
   protected showLabel = false;
   protected showTick = false;
+  protected showAxisLine = false;
   protected outerPadding = 0;
 
   constructor(
@@ -35,6 +36,11 @@ export abstract class BaseAxis implements Axis {
 
   setRange(range: [number, number]): void {
     this.range = range;
+    if (this.axisPosition === 'left' || this.axisPosition === 'right') {
+      this.boundingRect.height = range[1] - range[0];
+    } else {
+      this.boundingRect.width = range[1] - range[0];
+    }
     this.recalculateScale();
   }
 
@@ -77,6 +83,10 @@ export abstract class BaseAxis implements Axis {
 
   private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) {
     let availableHeight = availableSpace.height;
+    if (this.axisConfig.showAxisLine && availableHeight > this.axisConfig.axisLineWidth) {
+      availableHeight -= this.axisConfig.axisLineWidth;
+      this.showAxisLine = true;
+    }
     if (this.axisConfig.showLabel) {
       const spaceRequired = this.getLabelDimension();
       const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width;
@@ -96,7 +106,7 @@ export abstract class BaseAxis implements Axis {
     if (this.axisConfig.showTitle && this.title) {
       const spaceRequired = this.textDimensionCalculator.getMaxDimension(
         [this.title],
-        this.axisConfig.labelFontSize
+        this.axisConfig.titleFontSize
       );
       const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
       log.trace('height required for axis title: ', heightRequired);
@@ -111,6 +121,10 @@ export abstract class BaseAxis implements Axis {
 
   private calculateSpaceIfDrawnVertical(availableSpace: Dimension) {
     let availableWidth = availableSpace.width;
+    if (this.axisConfig.showAxisLine && availableWidth > this.axisConfig.axisLineWidth) {
+      availableWidth -= this.axisConfig.axisLineWidth;
+      this.showAxisLine = true;
+    }
     if (this.axisConfig.showLabel) {
       const spaceRequired = this.getLabelDimension();
       const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
@@ -129,9 +143,9 @@ export abstract class BaseAxis implements Axis {
     if (this.axisConfig.showTitle && this.title) {
       const spaceRequired = this.textDimensionCalculator.getMaxDimension(
         [this.title],
-        this.axisConfig.labelFontSize
+        this.axisConfig.titleFontSize
       );
-      const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
+      const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
       log.trace('width required for axis title: ', widthRequired);
       if (widthRequired <= availableWidth) {
         availableWidth -= widthRequired;
@@ -166,6 +180,22 @@ export abstract class BaseAxis implements Axis {
 
   private getDrawaableElementsForLeftAxis(): DrawableElem[] {
     const drawableElement: DrawableElem[] = [];
+    if (this.showAxisLine) {
+      const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2;
+      drawableElement.push({
+        type: 'path',
+        groupTexts: ['left-axis', 'axisl-line'],
+        data: [
+          {
+            path: `M ${x},${this.boundingRect.y} L ${x},${
+              this.boundingRect.y + this.boundingRect.height
+            } `,
+            strokeFill: this.axisThemeConfig.axisLineColor,
+            strokeWidth: this.axisConfig.axisLineWidth,
+          },
+        ],
+      });
+    }
     if (this.showLabel) {
       drawableElement.push({
         type: 'text',
@@ -175,19 +205,23 @@ export abstract class BaseAxis implements Axis {
           x:
             this.boundingRect.x +
             this.boundingRect.width -
-            this.axisConfig.labelPadding -
-            this.axisConfig.tickLength,
+            (this.showLabel ? this.axisConfig.labelPadding : 0) -
+            (this.showTick ? this.axisConfig.tickLength : 0) -
+            (this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
           y: this.getScaleValue(tick),
           fill: this.axisThemeConfig.labelColor,
           fontSize: this.axisConfig.labelFontSize,
           rotation: 0,
-          verticalPos: 'right',
-          horizontalPos: 'middle',
+          verticalPos: 'middle',
+          horizontalPos: 'right',
         })),
       });
     }
     if (this.showTick) {
-      const x = this.boundingRect.x + this.boundingRect.width;
+      const x =
+        this.boundingRect.x +
+        this.boundingRect.width -
+        (this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
       drawableElement.push({
         type: 'path',
         groupTexts: ['left-axis', 'ticks'],
@@ -208,12 +242,12 @@ export abstract class BaseAxis implements Axis {
           {
             text: this.title,
             x: this.boundingRect.x + this.axisConfig.titlePadding,
-            y: this.range[0] + (this.range[1] - this.range[0]) / 2,
+            y: this.boundingRect.y + this.boundingRect.height / 2,
             fill: this.axisThemeConfig.titleColor,
             fontSize: this.axisConfig.titleFontSize,
             rotation: 270,
-            verticalPos: 'center',
-            horizontalPos: 'top',
+            verticalPos: 'top',
+            horizontalPos: 'center',
           },
         ],
       });
@@ -222,6 +256,22 @@ export abstract class BaseAxis implements Axis {
   }
   private getDrawaableElementsForBottomAxis(): DrawableElem[] {
     const drawableElement: DrawableElem[] = [];
+    if (this.showAxisLine) {
+      const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2;
+      drawableElement.push({
+        type: 'path',
+        groupTexts: ['bottom-axis', 'axis-line'],
+        data: [
+          {
+            path: `M ${this.boundingRect.x},${y} L ${
+              this.boundingRect.x + this.boundingRect.width
+            },${y}`,
+            strokeFill: this.axisThemeConfig.axisLineColor,
+            strokeWidth: this.axisConfig.axisLineWidth,
+          },
+        ],
+      });
+    }
     if (this.showLabel) {
       drawableElement.push({
         type: 'text',
@@ -229,12 +279,16 @@ export abstract class BaseAxis implements Axis {
         data: this.getTickValues().map((tick) => ({
           text: tick.toString(),
           x: this.getScaleValue(tick),
-          y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength,
+          y:
+            this.boundingRect.y +
+            (this.showLabel ? this.axisConfig.labelPadding : 0) +
+            (this.showTitle ? this.axisConfig.tickLength : 0) +
+            (this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
           fill: this.axisThemeConfig.labelColor,
           fontSize: this.axisConfig.labelFontSize,
           rotation: 0,
-          verticalPos: 'center',
-          horizontalPos: 'top',
+          verticalPos: 'top',
+          horizontalPos: 'center',
         })),
       });
     }
@@ -244,8 +298,12 @@ export abstract class BaseAxis implements Axis {
         type: 'path',
         groupTexts: ['bottom-axis', 'ticks'],
         data: this.getTickValues().map((tick) => ({
-          path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${
-            y + this.axisConfig.tickLength
+          path: `M ${this.getScaleValue(tick)},${
+            y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
+          } L ${this.getScaleValue(tick)},${
+            y +
+            (this.showTick ? this.axisConfig.tickLength : 0) +
+            (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
           }`,
           strokeFill: this.axisThemeConfig.tickColor,
           strokeWidth: this.axisConfig.tickWidth,
@@ -264,8 +322,8 @@ export abstract class BaseAxis implements Axis {
             fill: this.axisThemeConfig.titleColor,
             fontSize: this.axisConfig.titleFontSize,
             rotation: 0,
-            verticalPos: 'center',
-            horizontalPos: 'bottom',
+            verticalPos: 'bottom',
+            horizontalPos: 'center',
           },
         ],
       });
@@ -274,6 +332,22 @@ export abstract class BaseAxis implements Axis {
   }
   private getDrawaableElementsForTopAxis(): DrawableElem[] {
     const drawableElement: DrawableElem[] = [];
+    if (this.showAxisLine) {
+      const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2;
+      drawableElement.push({
+        type: 'path',
+        groupTexts: ['top-axis', 'axis-line'],
+        data: [
+          {
+            path: `M ${this.boundingRect.x},${y} L ${
+              this.boundingRect.x + this.boundingRect.width
+            },${y}`,
+            strokeFill: this.axisThemeConfig.axisLineColor,
+            strokeWidth: this.axisConfig.axisLineWidth,
+          },
+        ],
+      });
+    }
     if (this.showLabel) {
       drawableElement.push({
         type: 'text',
@@ -283,14 +357,16 @@ export abstract class BaseAxis implements Axis {
           x: this.getScaleValue(tick),
           y:
             this.boundingRect.y +
-            this.boundingRect.height -
-            this.axisConfig.labelPadding -
-            this.axisConfig.tickLength,
+            (this.showTitle
+              ? this.axisConfig.titleFontSize +
+                this.axisConfig.labelPadding +
+                this.axisConfig.titlePadding * 2
+              : 0),
           fill: this.axisThemeConfig.labelColor,
           fontSize: this.axisConfig.labelFontSize,
           rotation: 0,
-          verticalPos: 'center',
-          horizontalPos: 'bottom',
+          verticalPos: 'top',
+          horizontalPos: 'center',
         })),
       });
     }
@@ -301,9 +377,12 @@ export abstract class BaseAxis implements Axis {
         groupTexts: ['bottom-axis', 'ticks'],
         data: this.getTickValues().map((tick) => ({
           path: `M ${this.getScaleValue(tick)},${
-            y + this.boundingRect.height
+            y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
           } L ${this.getScaleValue(tick)},${
-            y + this.boundingRect.height - this.axisConfig.tickLength
+            y +
+            this.boundingRect.height -
+            this.axisConfig.tickLength -
+            (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
           }`,
           strokeFill: this.axisThemeConfig.tickColor,
           strokeWidth: this.axisConfig.tickWidth,
@@ -317,13 +396,13 @@ export abstract class BaseAxis implements Axis {
         data: [
           {
             text: this.title,
-            x: this.range[0] + (this.range[1] - this.range[0]) / 2,
+            x: this.boundingRect.x + this.boundingRect.width / 2,
             y: this.boundingRect.y + this.axisConfig.titlePadding,
             fill: this.axisThemeConfig.titleColor,
             fontSize: this.axisConfig.titleFontSize,
             rotation: 0,
-            verticalPos: 'center',
-            horizontalPos: 'top',
+            verticalPos: 'top',
+            horizontalPos: 'center',
           },
         ],
       });
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
index 027ba7c7a..2d45d795c 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -56,11 +56,11 @@ export class Plot implements Plot {
       throw Error('Axes must be passed to render Plots');
     }
     const drawableElem: DrawableElem[] = [
-      ...new PlotBorder(
-        this.boundingRect,
-        this.chartConfig.chartOrientation,
-        this.chartThemeConfig
-      ).getDrawableElement(),
+      // ...new PlotBorder(
+      //   this.boundingRect,
+      //   this.chartConfig.chartOrientation,
+      //   this.chartThemeConfig
+      // ).getDrawableElement(),
     ];
     for (const [i, plot] of this.chartData.plots.entries()) {
       switch (plot.type) {
diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
index 8f999cb00..19d9d35e4 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
@@ -14,11 +14,15 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
   const db = diagObj.db as typeof XYChartDB;
   const themeConfig = db.getChartThemeConfig();
   const chartConfig = db.getChartConfig();
-  function getDominantBaseLine(horizontalPos: TextHorizontalPos) {
-    return horizontalPos === 'top' ? 'hanging' : 'middle';
+  function getDominantBaseLine(horizontalPos: TextVerticalPos) {
+    return horizontalPos === 'top'
+      ? 'text-before-edge'
+      : horizontalPos === 'bottom'
+      ? 'text-after-edge'
+      : 'middle';
   }
 
-  function getTextAnchor(verticalPos: TextVerticalPos) {
+  function getTextAnchor(verticalPos: TextHorizontalPos) {
     return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle';
   }
 
@@ -108,8 +112,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
           .attr('y', 0)
           .attr('fill', (data) => data.fill)
           .attr('font-size', (data) => data.fontSize)
-          .attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos))
-          .attr('text-anchor', (data) => getTextAnchor(data.verticalPos))
+          .attr('dominant-baseline', (data) => getDominantBaseLine(data.verticalPos))
+          .attr('text-anchor', (data) => getTextAnchor(data.horizontalPos))
           .attr('transform', (data) => getTextTransformation(data))
           .text((data) => data.text);
         break;
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 060cf8ae8..52b765a60 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -104,23 +104,24 @@ xychart-beta
 | showTitle                | Title to be shown or not                       |     true      |
 | xAxis                    | xAxis configuration                            |  AxisConfig   |
 | yAxis                    | yAxis configuration                            |  AxisConfig   |
-| plotBorderWidth          | Width of the border around the plot            |       2       |
 | chartOrientation         | ('vertical' or 'horizontal')                   |  'vertical'   |
 | plotReservedSpacePercent | Minimum space plots will take inside the chart |      50       |
 
 ### AxisConfig
 
-| Parameter     | Description                                  | Default value |
-| ------------- | -------------------------------------------- | :-----------: |
-| showLabel     | Show axis labels or tick values              |     true      |
-| labelFontSize | Font size of the label to be drawn           |      14       |
-| labelPadding  | Top and Bottom padding of the label          |       5       |
-| showTitle     | Axis title to be shown or not                |     true      |
-| titleFontSize | Axis title font size                         |      16       |
-| titlePadding  | Top and Bottom padding of Axis title         |       5       |
-| showTick      | Tick along with the label to be shown or not |     true      |
-| tickLength    | How long the tick will be                    |       5       |
-| tickWidth     | How width the tick will be                   |       2       |
+| Parameter     | Description                          | Default value |
+| ------------- | ------------------------------------ | :-----------: |
+| showLabel     | Show axis labels or tick values      |     true      |
+| labelFontSize | Font size of the label to be drawn   |      14       |
+| labelPadding  | Top and Bottom padding of the label  |       5       |
+| showTitle     | Axis title to be shown or not        |     true      |
+| titleFontSize | Axis title font size                 |      16       |
+| titlePadding  | Top and Bottom padding of Axis title |       5       |
+| showTick      | Tick to be shown or not              |     true      |
+| tickLength    | How long the tick will be            |       5       |
+| tickWidth     | How width the tick will be           |       2       |
+| showAxisLine  | Axis line to be shown or not         |     true      |
+| axisLineWidth | Thickness of the axis line           |       2       |
 
 ## Chart Theme Variables
 
@@ -137,15 +138,17 @@ Themes for xychart resides inside xychart attribute so to set the variables use
 | xAxisLableColor  | Color of the x-axis labels                            |
 | xAxisTitleColor  | Color of the x-axis title                             |
 | xAxisTickColor   | Color of the x-axis tick                              |
+| xAxisLineColor   | Color of the x-axis line                              |
 | yAxisLableColor  | Color of the y-axis labels                            |
 | yAxisTitleColor  | Color of the y-axis title                             |
 | yAxisTickColor   | Color of the y-axis tick                              |
+| yAxisLineColor   | Color of the y-axis line                              |
 | plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] |
 
 ## Example on config and theme
 
 ```mermaid-example
-%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
 xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index d7f5cdae3..da809985c 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1000,6 +1000,8 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       - showTick
       - tickLength
       - tickWidth
+      - showAxisLine
+      - axisLineWidth
     properties:
       showLabel:
         description: Should show the axis labels (tick text)
@@ -1043,6 +1045,16 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         type: integer
         default: 2
         minimum: 1
+      showAxisLine:
+        description: Show line across the axis
+        type: boolean
+        default: true
+      axisLineWidth:
+        description: Width of the axis line
+        type: integer
+        default: 2
+        minimum: 1
+
   XYChartConfig:
     title: XYChart Config
     allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
@@ -1057,7 +1069,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       - xAxis
       - yAxis
       - showTitle
-      - plotBorderWidth
       - chartOrientation
       - plotReservedSpacePercent
     properties:
@@ -1091,11 +1102,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       yAxis:
         $ref: '#/$defs/XYChartAxisConfig'
         default: { '$ref': '#/$defs/XYChartAxisConfig' }
-      plotBorderWidth:
-        description: width of the line around the plot of the chart
-        type: integer
-        default: 2
-        minimum: 0
       chartOrientation:
         description: How to plot will be drawn horizontal or vertical
         tsType: '"vertical" | "horizontal"'
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index f785d9e0c..db7fd2ba1 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -253,9 +253,11 @@ class Theme {
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
       plotColorPalette: this.xyChart?.plotColorPalette || [
         '#FFF4DD',
         '#FFD8B1',
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index b32750eac..c4354736b 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -259,9 +259,11 @@ class Theme {
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
       plotColorPalette: this.xyChart?.plotColorPalette || [
         '#3498db',
         '#2ecc71',
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 4ba78c805..ea3d20a5a 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -280,9 +280,11 @@ class Theme {
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
       plotColorPalette: this.xyChart?.plotColorPalette || [
         '#ECECFF',
         '#8493A6',
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index b75d7c944..0b5300d67 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -248,9 +248,11 @@ class Theme {
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
       plotColorPalette: this.xyChart?.plotColorPalette || [
         '#CDE498',
         '#FF6B6B',
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 44bcb5e67..26f84c38d 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -279,9 +279,11 @@ class Theme {
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
       plotColorPalette: this.xyChart?.plotColorPalette || [
         '#EEE',
         '#6BB8E4',