diff --git a/demos/xychart.html b/demos/xychart.html
index ad7bf0944..a7bd42614 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -54,7 +54,16 @@
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
-    bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99]
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>XY Charts demos</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Line chart with many category"
+    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
     <h1>XY Charts demos</h1>
@@ -63,7 +72,7 @@
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
-    bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99]
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
     <hr />
@@ -72,7 +81,7 @@
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'default',
-        logLevel: 0,
+        logLevel: 3,
         securityLevel: 'loose',
       });
     </script>
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 e695600e2..d076bc0a0 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
@@ -11,6 +11,7 @@ import { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { AxisPosition, Axis } from './index.js';
 
 const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7;
+const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2;
 
 export abstract class BaseAxis implements Axis {
   protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 };
@@ -52,7 +53,8 @@ export abstract class BaseAxis implements Axis {
   abstract getTickValues(): Array<string | number>;
 
   getTickDistance(): number {
-    return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length;
+    const range = this.getRange();
+    return Math.abs(range[0] - range[1]) / this.getTickValues().length;
   }
 
   getAxisOuterPadding(): number {
@@ -77,7 +79,9 @@ export abstract class BaseAxis implements Axis {
     let availableHeight = availableSpace.height;
     if (this.axisConfig.showLabel) {
       const spaceRequired = this.getLabelDimension();
-      this.outerPadding = spaceRequired.width / 2;
+      const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width;
+      this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding);
+
       const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
       log.trace('height required for axis label: ', heightRequired);
       if (heightRequired <= availableHeight) {
@@ -109,7 +113,8 @@ export abstract class BaseAxis implements Axis {
     let availableWidth = availableSpace.width;
     if (this.axisConfig.showLabel) {
       const spaceRequired = this.getLabelDimension();
-      this.outerPadding = spaceRequired.height / 2;
+      const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
+      this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding);
       const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2;
       log.trace('width required for axis label: ', widthRequired);
       if (widthRequired <= availableWidth) {