Rendering the chart with all the property from chart config

demos/xychart.html

@@ -18,8 +18,10 @@
     <pre class="mermaid">
     xychart-beta horizontal
     title Basic xychart
-    x-axis "this is x axis" [category1, "category 2", category3]
+    x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
+    line [23, 46, 75, 43]
+    bar "sample bat" [52, 96, 35, 10]
     </pre>
 
     <hr />
@@ -28,8 +30,10 @@
     <pre class="mermaid">
     xychart-beta
     title Basic xychart
-    x-axis "this is x axis" [category1, "category 2", category3]
+    x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
+    line [23, 46, 75, 43]
+    bar "sample bat" [52, 96, 35, 10]
     </pre>
 
     <hr />

packages/mermaid/src/diagrams/xychart/parser/xychart.jison

@@ -24,6 +24,8 @@
 %x line_title
 %x line_data
 %x line_data_entries
+%x line_data_without_label
+%x bar_data_without_label
 %x bar
 %x bar_title
 %x bar_data
@@ -77,18 +79,22 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 <line_title>[^"]+                         {return 'LINE_TITLE';}
 <line_title>["]" "*                       {this.popState(); this.begin("line_data");}
 <line_data>"["" "*                        {this.begin('line_data_entries');}
-<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "*   {return 'LINE_DATA'}
+<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "*   {return 'LINE_DATA'}
 <line_data_entries>"]"" "*                {this.popState(); this.popState(); this.popState()}
-<line>[^\s]+" "*                          {this.begin("line_data"); return 'LINE_TITLE';}
+<line_data_without_label>"]"" "*          {this.popState(); this.popState()}
+<line>[^\s\[]+" "*                          {this.begin("line_data"); return 'LINE_TITLE';}
+<line>"["" "*                             {this.begin('line_data_without_label');}
 
 "bar"" "*                                 {this.begin("bar"); return 'BAR';}
 <bar>["]                                  {this.begin("bar_title");}
 <bar_title>[^"]+                          {return 'BAR_TITLE';}
 <bar_title>["]" "*                        {this.popState(); this.begin("bar_data");}
 <bar_data>"["" "*                         {this.begin('bar_data_entries');}
-<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "*    {return 'BAR_DATA'}
+<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "*    {return 'BAR_DATA'}
 <bar_data_entries>"]"" "*                 {this.popState(); this.popState(); this.popState()}
-<bar>[^\s]+" "*                           {this.begin("bar_data"); return 'BAR_TITLE';}
+<bar_data_without_label>"]"" "*           {this.popState(); this.popState()}
+<bar>[^\s\[]+" "*                           {this.begin("bar_data"); return 'BAR_TITLE';}
+<bar>"["" "*                              {this.begin('bar_data_without_label');}
 
 
 
@@ -157,11 +163,13 @@ statement
 	;
 
 parseLine
-  : LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
+  : LINE LINE_DATA {yy.setLineData('', $2.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.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
+  : BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));}
+  | BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
   ;
 
 parseXAxis

packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts

@@ -175,6 +175,14 @@ describe('Testing xychart jison file', () => {
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
     expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]);
 
+    // set line data without title
+    str =
+      'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [  +23 , -45  , 56.6 ]   ';
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
+    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
+    expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]);
+
     clearMocks();
     str =
       'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space"   [  +23 , -4aa5  , 56.6 ]   ';
@@ -197,6 +205,15 @@ describe('Testing xychart jison file', () => {
     expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]);
     clearMocks();
 
+    // set bar data without title
+    str =
+      'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar   [  +23 , -45  , 56.6 ]   ';
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
+    expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
+    expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]);
+    clearMocks();
+
     str =
       'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space"   [  +23 , -4aa5  , 56.6 ]   ';
     expect(parserFnConstructor(str)).toThrow();

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -12,7 +12,12 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
-import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js';
+import {
+  ChartPlotEnum,
+  DrawableElem,
+  XYChartData,
+  isBandAxisData,
+} from './chartBuilder/Interfaces.js';
 import { XYChartConfig } from '../../config.type.js';
 
 const config = configApi.getConfig();
@@ -76,27 +81,7 @@ function getChartDefalutData(): XYChartData {
       categories: [],
     },
     title: '',
-    plots: [
+    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],
-        ],
-      },
-    ],
   };
 }
 
@@ -112,7 +97,6 @@ function parseDirective(statement: string, context: string, type: string) {
   mermaidAPI.parseDirective(this, statement, context, type);
 }
 
-
 function setOrientation(oriantation: string) {
   if (oriantation === 'horizontal') {
     xyChartConfig.chartOrientation = 'horizontal';
@@ -124,19 +108,39 @@ function setXAxisTitle(title: string) {
   xyChartData.xAxis.title = textSanitizer(title);
 }
 function setXAxisRangeData(min: number, max: number) {
-  xyChartData.xAxis = {title: xyChartData.xAxis.title, min, max};
+  xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max };
 }
 function setXAxisBand(categories: string[]) {
-  xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))};
+  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};
+  xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max };
+}
+function setLineData(title: string, data: number[]) {
+  if (isBandAxisData(xyChartData.xAxis)) {
+    xyChartData.plots.push({
+      type: ChartPlotEnum.BAR,
+      fill: '#0000bb',
+      data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]),
+    });
+  }
+}
+function setBarData(title: string, data: number[]) {
+  if (isBandAxisData(xyChartData.xAxis)) {
+    xyChartData.plots.push({
+      type: ChartPlotEnum.LINE,
+      strokeFill: '#00ff00',
+      strokeWidth: 2,
+      data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]),
+    });
+  }
 }
-function setLineData(title: string, data: number[]) {}
-function setBarData(title: string, data: number[]) {}
 
 function getDrawableElem(): DrawableElem[] {
   xyChartData.title = getDiagramTitle();