Able to draw till axis from chart configuration

- there is some issue with drawing the plot from chart data
2025-10-07 16:19:38 +02:00 · 2023-07-02 17:14:12 +05:30
parent 1d98ead5c2
commit ebd329149b
14 changed files with 282 additions and 224 deletions
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -16,11 +16,23 @@
  <body>
    <h1>XY Charts demos</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta horizontal
+    title Basic xychart
+    x-axis "this is x axis" [category1, "category 2", category3]
+    y-axis yaxisText 10 --> 150
    </pre>

    <hr />

+    <h1>XY Charts demos</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title Basic xychart
+    x-axis "this is x axis" [category1, "category 2", category3]
+    y-axis yaxisText 10 --> 150
+    </pre>
+
+    <hr />
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -150,6 +150,7 @@ export interface MermaidConfig {
  er?: ErDiagramConfig;
  pie?: PieDiagramConfig;
  quadrantChart?: QuadrantChartConfig;
+  xyChart?: XYChartConfig;
  requirement?: RequirementDiagramConfig;
  mindmap?: MindmapDiagramConfig;
  gitGraph?: GitGraphDiagramConfig;
@@ -703,6 +704,37 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
   */
  quadrantExternalBorderStrokeWidth?: number;
 }
+
+export interface XYChartAxisConfig {
+  showLabel: boolean;
+  labelFontSize: number;
+  lablePadding: number;
+  labelFill: string;
+  showTitle: boolean;
+  titleFontSize: number;
+  titlePadding: number;
+  titleFill: string;
+  showTick: boolean;
+  tickLength: number;
+  tickWidth: number;
+  tickFill: string;
+}
+
+export interface XYChartConfig extends BaseDiagramConfig {
+  width: number;
+  height: number;
+  fontFamily: string;
+  titleFontSize: number;
+  titleFill: string;
+  titlePadding: number;
+  showtitle: boolean;
+  xAxis: XYChartAxisConfig;
+  yAxis: XYChartAxisConfig;
+  plotBorderWidth: number;
+  chartOrientation: 'vertical' | 'horizontal';
+  plotReservedSpacePercent: number;
+}
+
 /**
 * The object containing configurations specific for entity relationship diagrams
 *
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -9,41 +9,6 @@ export interface ChartComponent {
  getDrawableElements(): DrawableElem[];
 }

-export enum OrientationEnum {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
-}
-
-export interface AxisConfig {
-  showLabel: boolean;
-  labelFontSize: number;
-  lablePadding: number;
-  labelFill: string;
-  showTitle: boolean;
-  titleFontSize: number;
-  titlePadding: number;
-  titleFill: string;
-  showTick: boolean;
-  tickLength: number;
-  tickWidth: number;
-  tickFill: string;
-}
-
-export interface XYChartConfig {
-  width: number;
-  height: number;
-  fontFamily: string;
-  titleFontSize: number;
-  titleFill: string;
-  titlePadding: number;
-  showtitle: boolean;
-  xAxis: AxisConfig;
-  yAxis: AxisConfig;
-  plotBorderWidth: number;
-  chartOrientation: OrientationEnum;
-  plotReservedSpacePercent: number;
-}
-
 export type SimplePlotDataType = [string | number, number][];

 export interface LinePlotData {
@@ -74,6 +39,11 @@ export interface LinearAxisDataType{

 export type AxisDataType = LinearAxisDataType | BandAxisDataType;

+export function isBandAxisData(data: any): data is BandAxisDataType {
+  return data.categories && Array.isArray(data.categories);
+}
+
+
 export interface XYChartData {
  xAxis: AxisDataType;
  yAxis: AxisDataType;
@@ -88,19 +58,6 @@ export interface Dimension {

 export interface BoundingRect extends Point, Dimension {}

-export interface XYChartSpaceProperty extends BoundingRect {
-  orientation: OrientationEnum;
-}
-
-export interface XYChartSpace {
-  chart: XYChartSpaceProperty;
-  title: XYChartSpaceProperty;
-  xAxisLabels: XYChartSpaceProperty;
-  xAxisTitle: XYChartSpaceProperty;
-  yAxisLabel: XYChartSpaceProperty;
-  yAxisTitle: XYChartSpaceProperty;
-}
-
 export interface Point {
  x: number;
  y: number;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -1,9 +1,10 @@
 import { log } from '../../../logger.js';
-import { DrawableElem, OrientationEnum, XYChartConfig, XYChartData } from './Interfaces.js';
+import { DrawableElem, XYChartData } 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: {
@@ -158,7 +159,7 @@ export class Orchestrator {
  }

  private calculateSpace() {
-    if (this.chartConfig.chartOrientation === OrientationEnum.HORIZONTAL) {
+    if (this.chartConfig.chartOrientation === 'horizontal') {
      this.calculateHorizonatalSpace();
    } else {
      this.calculateVerticalSpace();
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -1,14 +1,13 @@
 import { ITextDimensionCalculator, TextDimensionCalculator } from '../TextDimensionCalculator.js';
 import {
-  XYChartConfig,
  XYChartData,
  Dimension,
  BoundingRect,
  DrawableElem,
  Point,
-  OrientationEnum,
 } from '../Interfaces.js';
 import { ChartComponent } from '../Interfaces.js';
+import { XYChartConfig } from '../../../../config.type.js';

 export class ChartTitle implements ChartComponent {
  private boundingRect: BoundingRect;
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
@@ -1,13 +1,12 @@
 import {
-    AxisConfig,
    AxisDataType,
-    BandAxisDataType,
-    LinearAxisDataType
+    isBandAxisData,
 } from '../../Interfaces.js';
 import { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { ChartComponent } from '../../Interfaces.js';
 import { BandAxis } from './BandAxis.js';
 import { LinearAxis } from './LinearAxis.js';
+import { XYChartAxisConfig } from '../../../../../config.type.js';

 export type AxisPosition = 'left' | 'right' | 'top' | 'bottom';

@@ -19,15 +18,7 @@ export interface IAxis extends ChartComponent {
  setRange(range: [number, number]): void;
 }

-function isLinearAxisData(data: any): data is LinearAxisDataType {
-  return !(Number.isNaN(data.min) || Number.isNaN(data.max));
-}
-
-function isBandAxisData(data: any): data is BandAxisDataType {
-  return data.categories && Array.isArray(data.categories);
-}
-
-export function getAxis(data: AxisDataType, axisConfig: AxisConfig): IAxis {
+export function getAxis(data: AxisDataType, axisConfig: XYChartAxisConfig): IAxis {
  const textDimansionCalculator = new TextDimensionCalculator();
  if (isBandAxisData(data)) {
    return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator);
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
@@ -1,9 +1,8 @@
+import { XYChartConfig } from '../../../../../config.type.js';
 import {
  BarPlotData,
  BoundingRect,
  DrawableElem,
-  OrientationEnum,
-  SimplePlotDataType,
 } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';

@@ -13,7 +12,7 @@ export class BarPlot {
    private boundingRect: BoundingRect,
    private xAxis: IAxis,
    private yAxis: IAxis,
-    private orientation: OrientationEnum
+    private orientation: XYChartConfig['chartOrientation']
  ) {}

  getDrawableElement(): DrawableElem[] {
@@ -29,7 +28,7 @@ export class BarPlot {
      (1 - barPaddingPercent / 100);
    const barWidthHalf = barWidth / 2;

-    if (this.orientation === OrientationEnum.HORIZONTAL) {
+    if (this.orientation === 'horizontal') {
      return [
        {
          groupTexts: ['plot', 'bar-plot'],
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
@@ -1,13 +1,14 @@
 import { line } from 'd3';
-import { DrawableElem, LinePlotData, OrientationEnum } from '../../Interfaces.js';
+import { DrawableElem, LinePlotData } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';
+import { XYChartConfig } from '../../../../../config.type.js';

 export class LinePlot {
  constructor(
    private plotData: LinePlotData,
    private xAxis: IAxis,
    private yAxis: IAxis,
-    private orientation: OrientationEnum
+    private orientation: XYChartConfig['chartOrientation']
  ) {}

  getDrawableElement(): DrawableElem[] {
@@ -17,7 +18,7 @@ export class LinePlot {
    ]);

    let path: string | null;
-    if (this.orientation === OrientationEnum.HORIZONTAL) {
+    if (this.orientation === 'horizontal') {
      path = line()
        .y((d) => d[0])
        .x((d) => d[1])(finalData);
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
@@ -1,17 +1,20 @@
-import { BoundingRect, DrawableElem, OrientationEnum } from '../../Interfaces.js';
+import { XYChartConfig } from '../../../../../config.type.js';
+import { BoundingRect, DrawableElem } from '../../Interfaces.js';
 export class PlotBorder {
-  constructor(private boundingRect: BoundingRect, private orientation: OrientationEnum) {}
+  constructor(private boundingRect: BoundingRect, private orientation: XYChartConfig['chartOrientation']) {}

  getDrawableElement(): DrawableElem[] {
-    const {x, y, width, height} = this.boundingRect;
-    if(this.orientation === OrientationEnum.HORIZONTAL) {
+    const { x, y, width, height } = this.boundingRect;
+    if (this.orientation === 'horizontal') {
      return [
        {
          groupTexts: ['plot', 'chart-border'],
          type: 'path',
          data: [
            {
-            path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${y + height} L ${x},${y}`,
+              path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${
+                y + height
+              } L ${x},${y}`,
              strokeFill: '#000000',
              strokeWidth: 1,
            },
@@ -25,7 +28,9 @@ export class PlotBorder {
        type: 'path',
        data: [
          {
-            path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${y + height} L ${x},${y}`,
+            path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${
+              y + height
+            } L ${x},${y}`,
            strokeFill: '#000000',
            strokeWidth: 1,
          },
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -1,11 +1,9 @@
 import {
-  XYChartConfig,
  XYChartData,
  Dimension,
  BoundingRect,
  DrawableElem,
  Point,
-  OrientationEnum,
  ChartPlotEnum,
 } from '../../Interfaces.js';
 import { IAxis } from '../axis/index.js';
@@ -13,6 +11,7 @@ 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 {
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
@@ -1,107 +1,18 @@
 // @ts-ignore: TODO Fix ts errors
-import { defaultConfig } from '../../../config.js';
+import { XYChartConfig } from '../../../config.type.js';
 import { log } from '../../../logger.js';
 import {
-    ChartPlotEnum,
  DrawableElem,
-    OrientationEnum,
-    XYChartConfig,
-    XYChartData
+  XYChartData,
 } from './Interfaces.js';
 import { Orchestrator } from './Orchestrator.js';

 export class XYChartBuilder {
-  private config: XYChartConfig;
-  private chartData: XYChartData;

-  constructor() {
-    this.config = {
-      width: 700,
-      height: 500,
-      fontFamily: defaultConfig.fontFamily || 'Sans',
-      titleFontSize: 16,
-      titleFill: '#000000',
-      titlePadding: 5,
-      showtitle: true,
-      plotBorderWidth: 2,
-      yAxis: {
-        showLabel: true,
-        labelFontSize: 14,
-        lablePadding: 5,
-        labelFill: '#000000',
-        showTitle: true,
-        titleFontSize: 16,
-        titlePadding: 5,
-        titleFill: '#000000',
-        showTick: true,
-        tickLength: 5,
-        tickWidth: 2,
-        tickFill: '#000000',
-      },
-      xAxis: {
-        showLabel: true,
-        labelFontSize: 14,
-        lablePadding: 5,
-        labelFill: '#000000',
-        showTitle: true,
-        titleFontSize: 16,
-        titlePadding: 5,
-        titleFill: '#000000',
-        showTick: true,
-        tickLength: 5,
-        tickWidth: 2,
-        tickFill: '#000000',
-      },
-      chartOrientation: OrientationEnum.HORIZONTAL,
-      plotReservedSpacePercent: 50,
-    };
-    this.chartData = {
-      yAxis: {
-        title: 'yAxis1',
-        min: 0,
-        max: 100,
-      },
-      xAxis: {
-        title: 'xAxis',
-        categories: ['category1', 'category2', 'category3'],
-      },
-      title: 'this is a sample task',
-      plots: [
-        {
-          type: ChartPlotEnum.BAR,
-          fill: '#0000bb',
-          data: [
-            ['category1', 23],
-            ['category2', 56],
-            ['category3', 34],
-          ],
-        },
-        {
-          type: ChartPlotEnum.LINE,
-          strokeFill: '#bb0000',
-          strokeWidth: 2,
-          data: [
-            ['category1', 33],
-            ['category2', 45],
-            ['category3', 65],
-          ],
-        },
-      ],
-    };
-  }
-
-  setWidth(width: number) {
-    this.config.width = width;
-  }
-
-  setHeight(height: number) {
-    this.config.height = height;
-  }
-
-  build(): DrawableElem[] {
-    log.trace(`Build start with Config: ${JSON.stringify(this.config, null, 2)}`);
-    log.trace(`Build start with ChartData: ${JSON.stringify(this.chartData, null, 2)}`);
-    const orchestrator = new Orchestrator(this.config, this.chartData);
+  static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] {
+    log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`);
+    log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`);
+    const orchestrator = new Orchestrator(config, chartData);
    return orchestrator.getDrawableElement();
  }
 }
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
@@ -20,7 +20,6 @@
 %x axis_data
 %x axis_data_band
 %x axis_data_band_capture
-%x axis_data_band_str
 %x line
 %x line_title
 %x line_data
@@ -67,14 +66,10 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}

 <axis_data>[+-]?\d+(?:\.\d+)?" "*"-->"" "*[+-]?\d+(?:\.\d+)?" "*      { return 'AXIS_RANGE_DATA';}

-<axis_data>[\[]" "*                       {this.begin("axis_data_band"); this.begin("axis_data_band_capture")}
-<axis_data_band>[,]" "*                   {this.begin("axis_data_band_capture")}
-<axis_data_band_capture>["]               {this.begin("axis_data_band_str");}
-<axis_data_band_str>[^"]+                 {return "AXIS_BAND_DATA";}
-<axis_data_band_str>["]" "*               {this.popState(); this.popState();}
-<axis_data_band_capture>[^\s]+" "*        {this.popState(); return "AXIS_BAND_DATA"}
+<axis_data>[\[]" "*                       {this.begin("axis_data_band"), this.begin("axis_data_band_capture")}
+<axis_data_band_capture>(["][^",]+["]|[^\s\"\,]]+)" "*([,]" "*(["][^",]+["]|[^\s\]",]+)" "*)* { this.popState(); return "AXIS_BAND_DATA"; }
 <axis_data_band>[\]]" "*                  {this.popState(); return "AXIS_BAND_DATA_END"}
-<axis_data>[\r\n]+                        {this.popState(); this.popState();}
+<axis_data>[\s]+                        {this.popState(); this.popState();}


 "line"" "*                                {this.begin("line"); return 'LINE';}
@@ -162,27 +157,27 @@ statement
 	;

 parseLine
-  : LINE LINE_TITLE LINE_DATA {yy.addLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
+  : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
  ;

 parseBar
-  : BAR BAR_TITLE BAR_DATA {yy.addBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
+  : BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
  ;

 parseXAxis
  : AXIS_TITLE statement {yy.setXAxisTitle($1.trim());}
-  | AXIS_TITLE xAxisBandData {yy.setXAxisTitle($1.trim());}
-  | AXIS_TITLE AXIS_RANGE_DATA {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));}
+  | AXIS_TITLE xAxisBandData statement {yy.setXAxisTitle($1.trim());}
+  | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setXAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setXAxisRangeData(Number($$[0]), Number($$[1]));}
  ;

 xAxisBandData
-  : AXIS_BAND_DATA xAxisBandData {yy.addXAxisBand($1.trim());}
+  : AXIS_BAND_DATA xAxisBandData {yy.setXAxisBand($1.split(',').map(d => { let m = d.trim().match(/^(?:["]([^"]+)["]|([^\s"]+))$/); return m ? m[1] || m[2] : "";}));}
  | AXIS_BAND_DATA_END
  ;

 parseYAxis
  : AXIS_TITLE statement {yy.setYAxisTitle($1.trim());}
-  | AXIS_TITLE AXIS_RANGE_DATA {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));}
+  | AXIS_TITLE AXIS_RANGE_DATA statement {yy.setYAxisTitle($1.trim()); $$ = $2.split("-->"); yy.setYAxisRangeData(Number($$[0]), Number($$[1]));}
  ;

 directive
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -14,12 +14,11 @@ const mockDB: Record<string, Mock<any, any>> = {
  setDiagramTitle: vi.fn(),
  setXAxisTitle: vi.fn(),
  setXAxisRangeData: vi.fn(),
-  addXAxisBand: vi.fn(),
+  setXAxisBand: vi.fn(),
  setYAxisTitle: vi.fn(),
  setYAxisRangeData: vi.fn(),
-  addYAxisBand: vi.fn(),
-  addLineData: vi.fn(),
-  addBarData: vi.fn(),
+  setLineData: vi.fn(),
+  setBarData: vi.fn(),
 };

 function clearMocks() {
@@ -109,12 +108,27 @@ describe('Testing xychart jison file', () => {

    clearMocks();

-    str = 'xychart-beta \nx-axis xAxisName    [  "cat1"  ,   cat2  ]   \n';
+    str = 'xychart-beta \nx-axis xAxisName    [  "cat1"  ,   cat2  ]   \n   ';
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addXAxisBand).toHaveBeenCalledTimes(2);
-    expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(1, 'cat2');
-    expect(mockDB.addXAxisBand).toHaveBeenNthCalledWith(2, 'cat1');
+    expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1", "cat2"]);
+    clearMocks();
+
+
+    str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis');
+    expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]);
+    clearMocks();
+
+    str = 'xychart-beta \nx-axis xAxisName    [  "cat1  with space"  ,   cat2 , cat3]   \n   ';
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
+    expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["cat1  with space", "cat2", "cat3"]);
+    clearMocks();
+
+    str = 'xychart-beta \nx-axis xAxisName    [  "cat1  with space"  ,   cat2 asdf , cat3]   \n   ';
+    expect(parserFnConstructor(str)).toThrow();
  });
  it('parse y-axis', () => {
    let str = 'xychart-beta \ny-axis yAxisName\n';
@@ -150,7 +164,7 @@ describe('Testing xychart jison file', () => {
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle', [23, 45, 56.6]);

    clearMocks();

@@ -159,7 +173,7 @@ describe('Testing xychart jison file', () => {
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]);

    clearMocks();
    str =
@@ -171,7 +185,7 @@ describe('Testing xychart jison file', () => {
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle', [23, 45, 56.6]);

    clearMocks();

@@ -180,7 +194,7 @@ describe('Testing xychart jison file', () => {
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]);
    clearMocks();

    str =
@@ -193,9 +207,29 @@ describe('Testing xychart jison file', () => {
    expect(parserFnConstructor(str)).not.toThrow();
    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
-    expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]);
-    expect(mockDB.addBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]);
-    expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]);
-    expect(mockDB.addLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]);
+    clearMocks();
+
+    str = `
+    xychart-beta horizontal
+    title Basic xychart
+    x-axis "this is x axis" [category1, "category 2", category3]
+    y-axis yaxisText 10 --> 150
+ bar barTitle1 [23, 45, 56.6]
+ line lineTitle1 [11, 45.5, 67, 23]
+ bar barTitle2 [13, 42, 56.89]
+    line lineTitle2 [45, 99, 012]`;
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yaxisText');
+    expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150);
+    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('this is x axis');
+    expect(mockDB.setXAxisBand).toHaveBeenCalledWith(["category1", "category 2", "category3"]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle1', [23, 45, 56.6]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle2', [13, 42, 56.89]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle1', [11, 45.5, 67, 23]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle2', [45, 99, 12]);
  });
 });
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -12,9 +12,96 @@ import {
  clear as commonClear,
 } from '../../commonDb.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
-import { DrawableElem } from './chartBuilder/Interfaces.js';
+import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js';
+import { XYChartConfig } from '../../config.type.js';

 const config = configApi.getConfig();
+let chartWidth = 600;
+let chartHeight = 500;
+
+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,
+        titleFill: '#000000',
+        titlePadding: 5,
+        showtitle: true,
+        plotBorderWidth: 2,
+        yAxis: {
+          showLabel: true,
+          labelFontSize: 14,
+          lablePadding: 5,
+          labelFill: '#000000',
+          showTitle: true,
+          titleFontSize: 16,
+          titlePadding: 5,
+          titleFill: '#000000',
+          showTick: true,
+          tickLength: 5,
+          tickWidth: 2,
+          tickFill: '#000000',
+        },
+        xAxis: {
+          showLabel: true,
+          labelFontSize: 14,
+          lablePadding: 5,
+          labelFill: '#000000',
+          showTitle: true,
+          titleFontSize: 16,
+          titlePadding: 5,
+          titleFill: '#000000',
+          showTick: true,
+          tickLength: 5,
+          tickWidth: 2,
+          tickFill: '#000000',
+        },
+        chartOrientation: 'vertical',
+        plotReservedSpacePercent: 50,
+      };
+}
+
+function getChartDefalutData(): XYChartData {
+  return {
+    yAxis: {
+      title: 'yAxis1',
+      min: 0,
+      max: 100,
+    },
+    xAxis: {
+      title: 'xAxis',
+      categories: [],
+    },
+    title: '',
+    plots: [
+      {
+        type: ChartPlotEnum.BAR,
+        fill: '#0000bb',
+        data: [
+          ['category1', 23],
+          ['category 2', 56],
+          ['category3', 34],
+        ],
+      },
+      {
+        type: ChartPlotEnum.LINE,
+        strokeFill: '#bb0000',
+        strokeWidth: 2,
+        data: [
+          ['category1', 33],
+          ['category 2', 45],
+          ['category3', 65],
+        ],
+      },
+    ],
+  };
+}
+
+let xyChartConfig: XYChartConfig = getChartDefaultConfig();
+let xyChartData: XYChartData = getChartDefalutData();

 function textSanitizer(text: string) {
  return sanitizeText(text.trim(), config);
@@ -23,24 +110,51 @@ function textSanitizer(text: string) {
 function parseDirective(statement: string, context: string, type: string) {
  // @ts-ignore: TODO Fix ts errors
  mermaidAPI.parseDirective(this, statement, context, type);
-};
+}

-const xyChartBuilder = new XYChartBuilder();
+
+function setOrientation(oriantation: string) {
+  if (oriantation === 'horizontal') {
+    xyChartConfig.chartOrientation = 'horizontal';
+  } else {
+    xyChartConfig.chartOrientation = 'vertical';
+  }
+}
+function setXAxisTitle(title: string) {
+  xyChartData.xAxis.title = textSanitizer(title);
+}
+function setXAxisRangeData(min: number, max: number) {
+  xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max};
+}
+function setXAxisBand(categories: string[]) {
+  xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))};
+}
+function setYAxisTitle(title: string) {
+  xyChartData.yAxis.title = textSanitizer(title);
+}
+function setYAxisRangeData(min: number, max: number) {
+  xyChartData.yAxis = {title: xyChartData.yAxis.title, min, max};
+}
+function setLineData(title: string, data: number[]) {}
+function setBarData(title: string, data: number[]) {}

 function getDrawableElem(): DrawableElem[] {
-  return xyChartBuilder.build();
+  xyChartData.title = getDiagramTitle();
+  return XYChartBuilder.build(xyChartConfig, xyChartData);
 }

 function setHeight(height: number) {
-  xyChartBuilder.setHeight(height);
+  xyChartConfig.height = height;
 }

 function setWidth(width: number) {
-  xyChartBuilder.setWidth(width);
+  xyChartConfig.width = width;
 }

 const clear = function () {
  commonClear();
+  xyChartConfig = getChartDefaultConfig();
+  xyChartData = getChartDefalutData();
 };

 export default {
@@ -55,4 +169,12 @@ export default {
  getDiagramTitle,
  getAccDescription,
  setAccDescription,
+  setOrientation,
+  setXAxisTitle,
+  setXAxisRangeData,
+  setXAxisBand,
+  setYAxisTitle,
+  setYAxisRangeData,
+  setLineData,
+  setBarData,
 };