From fc9ff6c6f382fdd9be1cbca5d01ff38adce2d757 Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 2 Sep 2023 20:48:11 +0530 Subject: [PATCH] Added documentations --- demos/xychart.html | 8 + docs/intro/index.md | 20 +++ docs/syntax/xyChart.md | 170 ++++++++++++++++++ packages/mermaid/src/config.type.ts | 4 - .../xychart/chartBuilder/Interfaces.ts | 3 +- .../components/plot/PlotBorder.ts | 4 +- .../mermaid/src/docs/.vitepress/config.ts | 1 + packages/mermaid/src/docs/intro/examples.md | 11 ++ packages/mermaid/src/docs/syntax/xyChart.md | 155 ++++++++++++++++ .../mermaid/src/schemas/config.schema.yaml | 9 +- 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 +- 15 files changed, 375 insertions(+), 20 deletions(-) create mode 100644 docs/syntax/xyChart.md create mode 100644 packages/mermaid/src/docs/syntax/xyChart.md diff --git a/demos/xychart.html b/demos/xychart.html index 42992dd25..1a8d8c291 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -57,9 +57,17 @@ bar "sample bat" [52, 96, 35, 10] +

XY Charts demos

     xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+
+ +

XY Charts demos

+ 
+    %%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+    xychart-beta
     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
diff --git a/docs/intro/index.md b/docs/intro/index.md
index b0e9c2671..384df43c5 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -282,6 +282,26 @@ quadrantChart
     Campaign F: [0.35, 0.78]
 ```
 
+### [XY Chart](../syntax/xyChart.md)
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
+```mermaid
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
 ## Installation
 
 **In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
new file mode 100644
index 000000000..7e4303ba9
--- /dev/null
+++ b/docs/syntax/xyChart.md
@@ -0,0 +1,170 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).
+
+# XY Chart
+
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+
+> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
+
+## Example
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
+```mermaid
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
+## Syntax
+
+> **Note**
+> all text values can be single word without ", if multiple line required we have to use ".
+
+### Orientations
+
+The chart can be drawn horizontal or vertical, default value is vertical
+
+    xychart-beta horizontal
+    ...
+
+### Title
+
+The title is a short description of the chart and it will always render on top of the chart.
+
+#### Example
+
+    xychart-beta
+        title "This is a sample example"
+        ...
+
+> **Note**
+> if the title single word no need to use ", but if it has space " is needed
+
+### x-axis
+
+The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
+
+#### Example
+
+1.  `x-axis title min --> max` x-axis will function as numeric with the given range
+2.  `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
+
+### y-axis
+
+The y-axis is employed to represent numerical range values, it can't have categorical values.
+
+#### Example
+
+1.  `y-axis title min --> max`
+2.  `y-axis title` it will only add the title, the range will be auto generated from data.
+
+> **Note**
+> Both x and y axis are optional if not provided we will try to create the range
+
+### Line chart
+
+A line chart offers the capability to graphically depict lines.
+
+#### Example
+
+1.  `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+### Bar chart
+
+A bar chart offers the capability to graphically depict bars.
+
+#### Example
+
+1.  `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+#### Simplest example
+
+Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like
+
+    xychart-beta
+        line [+1.3, .6, 2.4, -.34]
+
+## Chart Configurations
+
+| Parameter                | Description                                    | Default value |
+| ------------------------ | ---------------------------------------------- | :-----------: |
+| width                    | Width of the chart                             |      700      |
+| height                   | Height of the chart                            |      500      |
+| titlePadding             | Top and Bottom padding of the title            |      10       |
+| titleFontSize            | Title font size                                |      20       |
+| 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       |
+
+## Chart Theme Variables
+
+> **Note**
+> theames for xychart resides inside xychart attribute so to set the variables use this syntax
+> %%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+
+| Parameter        | Description                                            |
+| ---------------- | ------------------------------------------------------ |
+| backgroundColor  | Background color of the whole chart                    |
+| titleColor       | Color of the Title text                                |
+| plotBorderColor  | Color of the plot border                               |
+| xAxisLableColor  | Color of the x-axis labels                             |
+| xAxisTitleColor  | Color of the x-axis title                              |
+| xAxisTickColor   | Color of the x-axis tick                               |
+| yAxisLableColor  | Color of the y-axis labels                             |
+| yAxisTitleColor  | Color of the y-axis title                              |
+| yAxisTickColor   | Color of the y-axis tick                               |
+| 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"} } }}%%
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
+```mermaid
+%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 0ce1ceb80..77e3dbeb6 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -763,10 +763,6 @@ export interface XYChartConfig extends BaseDiagramConfig {
    * height of the chart
    */
   height?: number;
-  /**
-   * Font family of texts in the xyChart
-   */
-  fontFamily?: string;
   /**
    * Font size of the chart title
    */
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
index 2c9247087..e23374aca 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -7,7 +7,7 @@ export interface XYChartAxisThemeConfig {
 export interface XYChartThemeConfig {
   backgroundColor: string;
   titleColor: string;
-  axisLineColor: string;
+  plotBorderColor: string;
   xAxisLableColor: string;
   xAxisTitleColor: string;
   xAxisTickColor: string;
@@ -86,7 +86,6 @@ export interface XYChartAxisConfig {
 export interface XYChartConfig {
   width: number;
   height: number;
-  fontFamily: string;
   titleFontSize: number;
   titlePadding: number;
   showTitle: boolean;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
index 3870f48e6..8bddf04d0 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
@@ -23,7 +23,7 @@ export class PlotBorder {
               path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${
                 y + height
               } L ${x},${y}`,
-              strokeFill: this.chartThemeConfig.axisLineColor,
+              strokeFill: this.chartThemeConfig.plotBorderColor,
               strokeWidth: 1,
             },
           ],
@@ -39,7 +39,7 @@ export class PlotBorder {
             path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${
               y + height
             } L ${x},${y}`,
-            strokeFill: this.chartThemeConfig.axisLineColor,
+            strokeFill: this.chartThemeConfig.plotBorderColor,
             strokeWidth: 1,
           },
         ],
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index ede064fa4..e30f91e13 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -146,6 +146,7 @@ function sidebarSyntax() {
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
         { text: 'Sankey 🔥', link: '/syntax/sankey' },
+        { text: 'XYChart 🔥', link: '/syntax/xychart' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md
index 7dda288dc..978edb2b7 100644
--- a/packages/mermaid/src/docs/intro/examples.md
+++ b/packages/mermaid/src/docs/intro/examples.md
@@ -117,3 +117,14 @@ quadrantChart
     Campaign E: [0.40, 0.34]
     Campaign F: [0.35, 0.78]
 ```
+
+### [XY Chart](../syntax/xyChart.md)
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
new file mode 100644
index 000000000..5e65cb670
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -0,0 +1,155 @@
+# XY Chart
+
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+
+> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
+
+## Example
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
+
+## Syntax
+
+```note
+all text values can be single word without ", if multiple line required we have to use ".
+```
+
+### Orientations
+
+The chart can be drawn horizontal or vertical, default value is vertical
+
+```
+xychart-beta horizontal
+...
+```
+
+### Title
+
+The title is a short description of the chart and it will always render on top of the chart.
+
+#### Example
+
+```
+xychart-beta
+    title "This is a sample example"
+    ...
+```
+
+```note
+if the title single word no need to use ", but if it has space " is needed
+```
+
+### x-axis
+
+The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
+
+#### Example
+
+1. `x-axis title min --> max` x-axis will function as numeric with the given range
+2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
+
+### y-axis
+
+The y-axis is employed to represent numerical range values, it can't have categorical values.
+
+#### Example
+
+1. `y-axis title min --> max`
+2. `y-axis title` it will only add the title, the range will be auto generated from data.
+
+```note
+Both x and y axis are optional if not provided we will try to create the range
+```
+
+### Line chart
+
+A line chart offers the capability to graphically depict lines.
+
+#### Example
+
+1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+### Bar chart
+
+A bar chart offers the capability to graphically depict bars.
+
+#### Example
+
+1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+#### Simplest example
+
+Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like
+
+```
+xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+```
+
+## Chart Configurations
+
+| Parameter                | Description                                    | Default value |
+| ------------------------ | ---------------------------------------------- | :-----------: |
+| width                    | Width of the chart                             |      700      |
+| height                   | Height of the chart                            |      500      |
+| titlePadding             | Top and Bottom padding of the title            |      10       |
+| titleFontSize            | Title font size                                |      20       |
+| 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       |
+
+## Chart Theme Variables
+
+```note
+theames for xychart resides inside xychart attribute so to set the variables use this syntax
+%%{init: { "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
+```
+
+| Parameter        | Description                                           |
+| ---------------- | ----------------------------------------------------- |
+| backgroundColor  | Background color of the whole chart                   |
+| titleColor       | Color of the Title text                               |
+| plotBorderColor  | Color of the plot border                              |
+| xAxisLableColor  | Color of the x-axis labels                            |
+| xAxisTitleColor  | Color of the x-axis title                             |
+| xAxisTickColor   | Color of the x-axis tick                              |
+| yAxisLableColor  | Color of the y-axis labels                            |
+| yAxisTitleColor  | Color of the y-axis title                             |
+| yAxisTickColor   | Color of the y-axis tick                              |
+| 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"} } }}%%
+xychart-beta
+    title "Sales Revenue"
+    x-axis [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]
+```
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 4e9e0e532..d7f5cdae3 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1052,7 +1052,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
     required:
       - width
       - height
-      - fontFamily
       - titleFontSize
       - titlePadding
       - xAxis
@@ -1072,19 +1071,15 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         type: integer
         default: 500
         minimum: 1
-      fontFamily:
-        description: Font family of texts in the xyChart
-        type: string
-        default: '"trebuchet ms", verdana, arial, sans-serif'
       titleFontSize:
         description: Font size of the chart title
         type: integer
-        default: 16
+        default: 20
         minimum: 1
       titlePadding:
         description: Top and bottom space from the chart title
         type: integer
-        default: 5
+        default: 10
         minimum: 0
       showTitle:
         description: Should show the chart title
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 90d5b1446..f785d9e0c 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -249,7 +249,7 @@ class Theme {
     this.xyChart = {
       backgroundColor: this.xyChart?.backgroundColor || this.background,
       titleColor: this.xyChart?.titleColor || this.primaryTextColor,
-      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 301255e0e..b32750eac 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -255,7 +255,7 @@ class Theme {
     this.xyChart = {
       backgroundColor: this.xyChart?.backgroundColor || this.background,
       titleColor: this.xyChart?.titleColor || this.primaryTextColor,
-      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index e95755947..4ba78c805 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -276,7 +276,7 @@ class Theme {
     this.xyChart = {
       backgroundColor: this.xyChart?.backgroundColor || this.background,
       titleColor: this.xyChart?.titleColor || this.primaryTextColor,
-      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 3cdcdbdce..b75d7c944 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -244,7 +244,7 @@ class Theme {
     this.xyChart = {
       backgroundColor: this.xyChart?.backgroundColor || this.background,
       titleColor: this.xyChart?.titleColor || this.primaryTextColor,
-      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index dbde17d98..44bcb5e67 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -275,7 +275,7 @@ class Theme {
     this.xyChart = {
       backgroundColor: this.xyChart?.backgroundColor || this.background,
       titleColor: this.xyChart?.titleColor || this.primaryTextColor,
-      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
       xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
       xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
       xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,