Updated code to use latest config system

.vite/jsonSchemaPlugin.ts

@@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

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)
 
 ---
 

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',

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
  *

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,

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;

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
       ),

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,
           },
         ],

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>;

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,

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>;

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';

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 {

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 {

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,
           },
         ],

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;

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 {

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;
 };

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

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;