Updated code to use latest config system

2025-08-15 14:29:25 +02:00 · 2023-08-13 22:56:50 +05:30
parent 6c2faf0bda
commit 526de36c86
20 changed files with 433 additions and 140 deletions
--- a/.vite/jsonSchemaPlugin.ts
+++ b/.vite/jsonSchemaPlugin.ts
@@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
  'er',
  'pie',
  'quadrantChart',
+  'xyChart',
  'requirement',
  'mindmap',
  'timeline',
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@

 #### Defined in

-[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)

 ---

--- a/packages/mermaid/scripts/create-types-from-json-schema.mts
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -46,6 +46,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
  'er',
  'pie',
  'quadrantChart',
+  'xyChart',
  'requirement',
  'mindmap',
  'timeline',
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -704,33 +704,178 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
   */
  quadrantExternalBorderStrokeWidth?: number;
 }
-
+/**
+ * This object contains configuration for XYChart axis config
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartAxisConfig".
+ */
 export interface XYChartAxisConfig {
-  showLabel: boolean;
-  labelFontSize: number;
-  lablePadding: number;
-  showTitle: boolean;
-  titleFontSize: number;
-  titlePadding: number;
-  showTick: boolean;
-  tickLength: number;
-  tickWidth: number;
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
 }
-
+/**
+ * This object contains configuration specific to XYCharts
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartConfig".
+ */
 export interface XYChartConfig extends BaseDiagramConfig {
-  width: number;
-  height: number;
-  fontFamily: string;
-  titleFontSize: number;
-  titlePadding: number;
-  showtitle: boolean;
-  xAxis: XYChartAxisConfig;
-  yAxis: XYChartAxisConfig;
-  plotBorderWidth: number;
-  chartOrientation: 'vertical' | 'horizontal';
-  plotReservedSpacePercent: number;
+  /**
+   * width of the chart
+   */
+  width?: number;
+  /**
+   * height of the chart
+   */
+  height?: number;
+  /**
+   * Font family of texts in the xyChart
+   */
+  fontFamily?: string;
+  /**
+   * Font size of the chart title
+   */
+  titleFontSize?: number;
+  /**
+   * Top and bottom space from the chart title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the chart title
+   */
+  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
+   */
+  chartOrientation?: 'vertical' | 'horizontal';
+  /**
+   * Minimum percent of space plots of the chart will take
+   */
+  plotReservedSpacePercent?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig1 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig2 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
 }
-
 /**
 * The object containing configurations specific for entity relationship diagrams
 *
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -234,6 +234,10 @@ const config: Partial<MermaidConfig> = {
    ...defaultConfigJson.pie,
    useWidth: undefined,
  },
+  xyChart: {
+    ...defaultConfigJson.xyChart,
+    useWidth: undefined,
+  },
  requirement: {
    ...defaultConfigJson.requirement,
    useWidth: undefined,
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -5,15 +5,15 @@ export interface XYChartAxisThemeConfig {
 }

 export interface XYChartThemeConfig {
-  xychartTitleColor: string;
-  xychartAxisLineColor: string;
-  xychartXAxisLableColor: string;
-  xychartXAxisTitleColor: string;
-  xychartXAxisTickColor: string;
-  xychartYAxisLableColor: string;
-  xychartYAxisTitleColor: string;
-  xychartYAxisTickColor: string;
-  xychartPlotBaseColor: string;
+  titleColor: string;
+  axisLineColor: string;
+  xAxisLableColor: string;
+  xAxisTitleColor: string;
+  xAxisTickColor: string;
+  yAxisLableColor: string;
+  yAxisTitleColor: string;
+  yAxisTickColor: string;
+  plotBaseColor: string;
 }

 export interface ChartComponent {
@@ -66,6 +66,36 @@ export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType
  return data.type === 'linear';
 }

+/**
+ * For now we are keeping this configs as we are removing the required fields while generating the config.type.ts file
+ * we should remove `XYChartAxisConfig` and `XYChartConfig` after we started using required fields
+ */
+export interface XYChartAxisConfig {
+  showLabel: boolean;
+  labelFontSize: number;
+  labelPadding: number;
+  showTitle: boolean;
+  titleFontSize: number;
+  titlePadding: number;
+  showTick: boolean;
+  tickLength: number;
+  tickWidth: number;
+}
+
+export interface XYChartConfig {
+  width: number;
+  height: number;
+  fontFamily: string;
+  titleFontSize: number;
+  titlePadding: number;
+  showTitle: boolean;
+  xAxis: XYChartAxisConfig;
+  yAxis: XYChartAxisConfig;
+  plotBorderWidth: number;
+  chartOrientation: 'vertical' | 'horizontal';
+  plotReservedSpacePercent: number;
+}
+
 export interface XYChartData {
  xAxis: AxisDataType;
  yAxis: AxisDataType;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -1,10 +1,15 @@
 import { log } from '../../../logger.js';
-import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js';
+import {
+  DrawableElem,
+  XYChartData,
+  XYChartThemeConfig,
+  XYChartConfig,
+  isBarPlot,
+} from './Interfaces.js';
 import { getChartTitleComponent } from './components/ChartTitle.js';
 import { ChartComponent } from './Interfaces.js';
 import { IAxis, getAxis } from './components/axis/index.js';
 import { IPlot, getPlotComponent } from './components/plot/index.js';
-import { XYChartConfig } from '../../../config.type.js';

 export class Orchestrator {
  private componentStore: {
@@ -25,9 +30,9 @@ export class Orchestrator {
        chartData.xAxis,
        chartConfig.xAxis,
        {
-          titleColor: chartThemeConfig.xychartXAxisTitleColor,
-          labelColor: chartThemeConfig.xychartXAxisLableColor,
-          tickColor: chartThemeConfig.xychartXAxisTickColor,
+          titleColor: chartThemeConfig.xAxisTitleColor,
+          labelColor: chartThemeConfig.xAxisLableColor,
+          tickColor: chartThemeConfig.xAxisTickColor,
        },
        chartConfig.fontFamily
      ),
@@ -35,9 +40,9 @@ export class Orchestrator {
        chartData.yAxis,
        chartConfig.yAxis,
        {
-          titleColor: chartThemeConfig.xychartYAxisTitleColor,
-          labelColor: chartThemeConfig.xychartYAxisLableColor,
-          tickColor: chartThemeConfig.xychartYAxisTickColor,
+          titleColor: chartThemeConfig.yAxisTitleColor,
+          labelColor: chartThemeConfig.yAxisLableColor,
+          tickColor: chartThemeConfig.yAxisTickColor,
        },
        chartConfig.fontFamily
      ),
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -1,4 +1,3 @@
-import { XYChartConfig } from '../../../../config.type.js';
 import {
  BoundingRect,
  ChartComponent,
@@ -7,6 +6,7 @@ import {
  Point,
  XYChartData,
  XYChartThemeConfig,
+  XYChartConfig,
 } from '../Interfaces.js';
 import {
  ITextDimensionCalculator,
@@ -28,7 +28,7 @@ export class ChartTitle implements ChartComponent {
      width: 0,
      height: 0,
    };
-    this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle);
+    this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle);
  }
  setBoundingBoxXY(point: Point): void {
    this.boundingRect.x = point.x;
@@ -69,7 +69,7 @@ export class ChartTitle implements ChartComponent {
            horizontalPos: 'middle',
            x: this.boundingRect.x + this.boundingRect.width / 2,
            y: this.boundingRect.y + this.boundingRect.height / 2,
-            fill: this.chartThemeConfig.xychartTitleColor,
+            fill: this.chartThemeConfig.titleColor,
            rotation: 0,
          },
        ],
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts
@@ -1,9 +1,8 @@
 import { ScaleBand, scaleBand } from 'd3';
-import { XYChartAxisConfig } from '../../../../../config.type.js';
 import { log } from '../../../../../logger.js';
 import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { BaseAxis } from './BaseAxis.js';
-import { XYChartAxisThemeConfig } from '../../Interfaces.js';
+import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';

 export class BandAxis extends BaseAxis {
  private scale: ScaleBand<string>;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
@@ -1,4 +1,3 @@
-import { XYChartAxisConfig } from '../../../../../config.type.js';
 import { log } from '../../../../../logger.js';
 import {
  BoundingRect,
@@ -6,6 +5,7 @@ import {
  DrawableElem,
  Point,
  XYChartAxisThemeConfig,
+  XYChartAxisConfig,
 } from '../../Interfaces.js';
 import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { AxisPosition, IAxis } from './index.js';
@@ -76,7 +76,7 @@ export abstract class BaseAxis implements IAxis {
    if (this.axisConfig.showLabel) {
      const spaceRequired = this.getLabelDimension();
      this.outerPadding = spaceRequired.width / 2;
-      const heightRequired = spaceRequired.height + this.axisConfig.lablePadding * 2;
+      const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
      log.trace('height required for axis label: ', heightRequired);
      if (heightRequired <= availableHeight) {
        availableHeight -= heightRequired;
@@ -108,7 +108,7 @@ export abstract class BaseAxis implements IAxis {
    if (this.axisConfig.showLabel) {
      const spaceRequired = this.getLabelDimension();
      this.outerPadding = spaceRequired.height / 2;
-      const widthRequired = spaceRequired.width + this.axisConfig.lablePadding * 2;
+      const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2;
      log.trace('width required for axis label: ', widthRequired);
      if (widthRequired <= availableWidth) {
        availableWidth -= widthRequired;
@@ -124,7 +124,7 @@ export abstract class BaseAxis implements IAxis {
        [this.title],
        this.axisConfig.labelFontSize
      );
-      const widthRequired = spaceRequired.height + this.axisConfig.lablePadding * 2;
+      const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
      log.trace('width required for axis title: ', widthRequired);
      if (widthRequired <= availableWidth) {
        availableWidth -= widthRequired;
@@ -168,7 +168,7 @@ export abstract class BaseAxis implements IAxis {
          x:
            this.boundingRect.x +
            this.boundingRect.width -
-            this.axisConfig.lablePadding -
+            this.axisConfig.labelPadding -
            this.axisConfig.tickLength,
          y: this.getScaleValue(tick),
          fill: this.axisThemeConfig.labelColor,
@@ -222,7 +222,7 @@ export abstract class BaseAxis implements IAxis {
        data: this.getTickValues().map((tick) => ({
          text: tick.toString(),
          x: this.getScaleValue(tick),
-          y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength,
+          y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength,
          fill: this.axisThemeConfig.labelColor,
          fontSize: this.axisConfig.labelFontSize,
          rotation: 0,
@@ -277,7 +277,7 @@ export abstract class BaseAxis implements IAxis {
          y:
            this.boundingRect.y +
            this.boundingRect.height -
-            this.axisConfig.lablePadding -
+            this.axisConfig.labelPadding -
            this.axisConfig.tickLength,
          fill: this.axisThemeConfig.labelColor,
          fontSize: this.axisConfig.labelFontSize,
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts
@@ -1,9 +1,8 @@
 import { ScaleLinear, scaleLinear } from 'd3';
-import { XYChartAxisConfig } from '../../../../../config.type.js';
 import { log } from '../../../../../logger.js';
 import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { BaseAxis } from './BaseAxis.js';
-import { XYChartAxisThemeConfig } from '../../Interfaces.js';
+import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';

 export class LinearAxis extends BaseAxis {
  private scale: ScaleLinear<number, number>;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
@@ -1,8 +1,8 @@
-import { XYChartAxisConfig } from '../../../../../config.type.js';
 import {
  AxisDataType,
  ChartComponent,
  XYChartAxisThemeConfig,
+  XYChartAxisConfig,
  isBandAxisData,
 } from '../../Interfaces.js';
 import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js';
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
@@ -1,5 +1,4 @@
-import { XYChartConfig } from '../../../../../config.type.js';
-import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js';
+import { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';

 export class BarPlot {
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
@@ -1,6 +1,5 @@
 import { line } from 'd3';
-import { XYChartConfig } from '../../../../../config.type.js';
-import { DrawableElem, LinePlotData } from '../../Interfaces.js';
+import { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';

 export class LinePlot {
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
@@ -1,5 +1,4 @@
-import { XYChartConfig } from '../../../../../config.type.js';
-import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js';
+import { BoundingRect, DrawableElem, XYChartConfig, XYChartThemeConfig } from '../../Interfaces.js';
 export class PlotBorder {
  constructor(
    private boundingRect: BoundingRect,
@@ -19,7 +18,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.xychartAxisLineColor,
+              strokeFill: this.chartThemeConfig.axisLineColor,
              strokeWidth: 1,
            },
          ],
@@ -35,7 +34,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.xychartAxisLineColor,
+            strokeFill: this.chartThemeConfig.axisLineColor,
            strokeWidth: 1,
          },
        ],
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -5,13 +5,13 @@ import {
  DrawableElem,
  Point,
  XYChartThemeConfig,
+  XYChartConfig,
 } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';
 import { ChartComponent } from '../../Interfaces.js';
 import { LinePlot } from './LinePlot.js';
 import { PlotBorder } from './PlotBorder.js';
 import { BarPlot } from './BarPlot.js';
-import { XYChartConfig } from '../../../../../config.type.js';

 export interface IPlot extends ChartComponent {
  setAxes(xAxis: IAxis, yAxis: IAxis): void;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
@@ -1,7 +1,5 @@
-// @ts-ignore: TODO Fix ts errors
-import { XYChartConfig } from '../../../config.type.js';
 import { log } from '../../../logger.js';
-import { DrawableElem, XYChartData, XYChartThemeConfig } from './Interfaces.js';
+import { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js';
 import { Orchestrator } from './Orchestrator.js';

 export class XYChartBuilder {
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -2,6 +2,7 @@
 import { adjust, channel } from 'khroma';
 import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
+import defaultConfig from '../../defaultConfig.js';
 import { sanitizeText } from '../common/common.js';
 import {
  setAccTitle,
@@ -20,14 +21,16 @@ import {
  XYChartThemeConfig,
  isBandAxisData,
  isLinearAxisData,
+  XYChartConfig,
 } from './chartBuilder/Interfaces.js';
-import { XYChartConfig } from '../../config.type.js';
 import { getThemeVariables } from '../../themes/theme-default.js';

 const defaultThemeVariables = getThemeVariables();

 const config = configApi.getConfig();

+let plotIndex = 0;
+
 function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] {
  const colors = [];
  const MAX_HUE_VALUE = 360;
@@ -48,62 +51,45 @@ function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): str

 function getChartDefaultThemeConfig(): XYChartThemeConfig {
  return {
-    xychartTitleColor:
-      config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor,
-    xychartAxisLineColor:
-      config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor,
-    xychartXAxisLableColor:
-      config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor,
-    xychartXAxisTitleColor:
-      config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor,
-    xychartXAxisTickColor:
-      config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor,
-    xychartYAxisLableColor:
-      config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor,
-    xychartYAxisTitleColor:
-      config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor,
-    xychartYAxisTickColor:
-      config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor,
-    xychartPlotBaseColor:
-      config.themeVariables?.xychartPlotBaseColor || defaultThemeVariables.xychartPlotBaseColor,
+    titleColor:
+      config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor,
+    axisLineColor:
+      config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor,
+    xAxisLableColor:
+      config.themeVariables?.xyChart?.xAxisLableColor ||
+      defaultThemeVariables.xyChart.xAxisLableColor,
+    xAxisTitleColor:
+      config.themeVariables?.xyChart?.xAxisTitleColor ||
+      defaultThemeVariables.xyChart.xAxisTitleColor,
+    xAxisTickColor:
+      config.themeVariables?.xyChart?.xAxisTickColor ||
+      defaultThemeVariables.xyChart.xAxisTickColor,
+    yAxisLableColor:
+      config.themeVariables?.xyChart?.yAxisLableColor ||
+      defaultThemeVariables.xyChart.yAxisLableColor,
+    yAxisTitleColor:
+      config.themeVariables?.xyChart?.yAxisTitleColor ||
+      defaultThemeVariables.xyChart.yAxisTitleColor,
+    yAxisTickColor:
+      config.themeVariables?.xyChart?.yAxisTickColor ||
+      defaultThemeVariables.xyChart.yAxisTickColor,
+    plotBaseColor:
+      config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor,
  };
 }
 function getChartDefaultConfig(): XYChartConfig {
-  return config.xyChart
-    ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } }
-    : {
-        width: 700,
-        height: 500,
-        fontFamily: config.fontFamily || 'Sans',
-        titleFontSize: 16,
-        titlePadding: 5,
-        showtitle: true,
-        plotBorderWidth: 2,
-        yAxis: {
-          showLabel: true,
-          labelFontSize: 14,
-          lablePadding: 5,
-          showTitle: true,
-          titleFontSize: 16,
-          titlePadding: 5,
-          showTick: true,
-          tickLength: 5,
-          tickWidth: 2,
-        },
-        xAxis: {
-          showLabel: true,
-          labelFontSize: 14,
-          lablePadding: 5,
-          showTitle: true,
-          titleFontSize: 16,
-          titlePadding: 5,
-          showTick: true,
-          tickLength: 5,
-          tickWidth: 2,
-        },
-        chartOrientation: 'vertical',
-        plotReservedSpacePercent: 50,
-      };
+  return {
+    ...(defaultConfig.xyChart as XYChartConfig),
+    ...(config.xyChart ? config.xyChart : {}),
+    yAxis: {
+      ...(defaultConfig.xyChart as XYChartConfig).yAxis,
+      ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}),
+    },
+    xAxis: {
+      ...(defaultConfig.xyChart as XYChartConfig).xAxis,
+      ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}),
+    },
+  };
 }

 function getChartDefalutData(): XYChartData {
@@ -127,9 +113,9 @@ function getChartDefalutData(): XYChartData {
 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
 let xyChartData: XYChartData = getChartDefalutData();
-let plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor)
-  ? xyChartThemeConfig.xychartPlotBaseColor
-  : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor);
+let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
+  ? xyChartThemeConfig.plotBaseColor
+  : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
 let hasSetXAxis = false;
 let hasSetYAxis = false;

@@ -223,8 +209,6 @@ function transformDataWithOutCategory(data: number[]): SimplePlotDataType {
  return retData;
 }

-let plotIndex = 0;
-
 function getPlotColorFromPalette(plotIndex: number): string {
  return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)];
 }
@@ -272,9 +256,9 @@ const clear = function () {
  xyChartConfig = getChartDefaultConfig();
  xyChartData = getChartDefalutData();
  xyChartThemeConfig = getChartDefaultThemeConfig();
-  plotColorPalette = Array.isArray(xyChartThemeConfig.xychartPlotBaseColor)
-    ? xyChartThemeConfig.xychartPlotBaseColor
-    : plotColorPaletteGenerator(xyChartThemeConfig.xychartPlotBaseColor);
+  plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
+    ? xyChartThemeConfig.plotBaseColor
+    : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
  hasSetXAxis = false;
  hasSetYAxis = false;
 };
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -43,6 +43,7 @@ required:
  - er
  - pie
  - quadrantChart
+  - xyChart
  - requirement
  - mindmap
  - gitGraph
@@ -197,6 +198,8 @@ properties:
    $ref: '#/$defs/PieDiagramConfig'
  quadrantChart:
    $ref: '#/$defs/QuadrantChartConfig'
+  xyChart:
+    $ref: '#/$defs/XYChartConfig'
  requirement:
    $ref: '#/$defs/RequirementDiagramConfig'
  mindmap:
@@ -982,6 +985,131 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
        type: number
        minimum: 0
        default: 2
+  XYChartAxisConfig:
+    title: XYChart axis config
+    description: This object contains configuration for XYChart axis config
+    type: object
+    unevaluatedProperties: true
+    required:
+      - showLabel
+      - labelFontSize
+      - labelPadding
+      - showTitle
+      - titleFontSize
+      - titlePadding
+      - showTick
+      - tickLength
+      - tickWidth
+    properties:
+      showLabel:
+        description: Should show the axis labels (tick text)
+        type: boolean
+        default: true
+      labelFontSize:
+        description: font size of the axis labels (tick text)
+        type: integer
+        default: 14
+        minimum: 1
+      labelPadding:
+        description: top and bottom space from axis label (tick text)
+        type: integer
+        default: 5
+        minimum: 0
+      showTitle:
+        description: Should show the axis title
+        type: boolean
+        default: true
+      titleFontSize:
+        description: font size of the axis title
+        type: integer
+        default: 16
+        minimum: 1
+      titlePadding:
+        description: top and bottom space from axis title
+        type: integer
+        default: 5
+        minimum: 0
+      showTick:
+        description: Should show the axis tick lines
+        type: boolean
+        default: true
+      tickLength:
+        description: length of the axis tick lines
+        type: integer
+        default: 5
+        minimum: 1
+      tickWidth:
+        description: width of the axis tick lines
+        type: integer
+        default: 2
+        minimum: 1
+  XYChartConfig:
+    title: XYChart Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: This object contains configuration specific to XYCharts
+    type: object
+    unevaluatedProperties: false
+    required:
+      - width
+      - height
+      - fontFamily
+      - titleFontSize
+      - titlePadding
+      - xAxis
+      - yAxis
+      - showTitle
+      - plotBorderWidth
+      - chartOrientation
+      - plotReservedSpacePercent
+    properties:
+      width:
+        description: width of the chart
+        type: integer
+        default: 700
+        minimum: 1
+      height:
+        description: height of the chart
+        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
+        minimum: 1
+      titlePadding:
+        description: Top and bottom space from the chart title
+        type: integer
+        default: 5
+        minimum: 0
+      showTitle:
+        description: Should show the chart title
+        type: boolean
+        default: true
+      xAxis:
+        $ref: '#/$defs/XYChartAxisConfig'
+        default: { '$ref': '#/$defs/XYChartAxisConfig' }
+      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"'
+        default: 'vertical'
+      plotReservedSpacePercent:
+        description: Minimum percent of space plots of the chart will take
+        type: integer
+        default: 50
+        minimum: 30

  ErDiagramConfig:
    title: Er Diagram Config
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -273,16 +273,18 @@ class Theme {
    this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;

    /* xychart */
-    this.xychartBackgroundColor = this.xychartBackgroundColor || this.background;
-    this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor;
-    this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor;
-    this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor;
-    this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor;
-    this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor;
-    this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor;
-    this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor;
-    this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor;
-    this.xychartPlotBaseColor = this.xychartPlotBaseColor || darken(this.primaryColor, 25);
+    this.xyChart = {
+      backgroundColor: this.xyChart?.backgroundColor || this.background,
+      titleColor: this.xyChart?.titleColor || this.primaryTextColor,
+      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
+      xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+      xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
+      yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
+      yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25),
+    };

    /* requirement-diagram */
    this.requirementBackground = this.requirementBackground || this.primaryColor;