From e061489b841939e3a74758c622a8e6ec05180dc9 Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Tue, 19 Sep 2023 21:09:31 +0530 Subject: [PATCH] Added review changes --- cypress/integration/rendering/xyChart.spec.js | 368 +++++++++--------- docs/syntax/xyChart.md | 4 +- .../chartBuilder/components/axis/baseAxis.ts | 13 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 6 +- packages/mermaid/src/docs/syntax/xyChart.md | 4 +- 5 files changed, 198 insertions(+), 197 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 3948dc71e..85d998c50 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -4,8 +4,8 @@ describe('XY Chart', () => { it('should render the simplest possible chart', () => { imgSnapshotTest( ` - xychart-beta - line [10, 30, 20] + xychart-beta + line [10, 30, 20] `, {} ); @@ -14,12 +14,12 @@ describe('XY Chart', () => { it('Should render a complete chart', () => { imgSnapshotTest( ` - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -27,11 +27,11 @@ describe('XY Chart', () => { it('Should render a chart without title', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -40,11 +40,11 @@ describe('XY Chart', () => { it('y-axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -53,10 +53,10 @@ describe('XY Chart', () => { it('Should render a chart without y-axis with different range', () => { imgSnapshotTest( ` - xychart-beta - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -65,10 +65,10 @@ describe('XY Chart', () => { it('x axis title not required', () => { imgSnapshotTest( ` - xychart-beta - x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] - line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] + xychart-beta + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000] + line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800] `, {} ); @@ -77,24 +77,24 @@ describe('XY Chart', () => { it('Multiple plots can be rendered', () => { imgSnapshotTest( ` - xychart-beta - line [23, 46, 77, 34] - line [45, 32, 33, 12] - bar [87, 54, 99, 85] - line [78, 88, 22, 4] - line [22, 29, 75, 33] - bar [52, 96, 35, 10] + xychart-beta + line [23, 46, 77, 34] + line [45, 32, 33, 12] + bar [87, 54, 99, 85] + line [78, 88, 22, 4] + line [22, 29, 75, 33] + bar [52, 96, 35, 10] `, {} ); cy.get('svg'); }); - it('Decimals and -ve no are supported', () => { + it('Decimals and negative numbers are supported', () => { imgSnapshotTest( ` - xychart-beta - y-axis -2.4 --> 3.5 - line [+1.3, .6, 2.4, -.34] + xychart-beta + y-axis -2.4 --> 3.5 + line [+1.3, .6, 2.4, -.34] `, {} ); @@ -103,16 +103,16 @@ describe('XY Chart', () => { it('Render spark line with "plotReservedSpacePercent"', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - plotReservedSpacePercent: 100 ---- - xychart-beta - line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + plotReservedSpacePercent: 100 + --- + xychart-beta + line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -121,25 +121,25 @@ config: it('Render spark bar without displaying other property', () => { imgSnapshotTest( ` ---- -config: - theme: dark - xyChart: - width: 200 - height: 20 - xAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false - yAxis: - showLabel: false - showTitle: false - showTick: false - showAxisLine: false ---- - xychart-beta - bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] + --- + config: + theme: dark + xyChart: + width: 200 + height: 20 + xAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + yAxis: + showLabel: false + showTitle: false + showTick: false + showAxisLine: false + --- + xychart-beta + bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] `, {} ); @@ -148,13 +148,13 @@ config: it('Should use all the config from directive', () => { imgSnapshotTest( ` - %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%% + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -163,39 +163,39 @@ config: it('Should use all the config from yaml', () => { imgSnapshotTest( ` ---- -config: - theme: forest - xyChart: - width: 1000 - height: 600 - titlePadding: 5 - titleFontSize: 10 - xAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - yAxis: - labelFontSize: 20 - labelPadding: 10 - titleFontSize: 30 - titlePadding: 20 - tickLength: 10 - tickWidth: 5 - axisLineWidth: 5 - chartOrientation: horizontal - plotReservedSpacePercent: 60 ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + theme: forest + xyChart: + width: 1000 + height: 600 + titlePadding: 5 + titleFontSize: 10 + xAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + yAxis: + labelFontSize: 20 + labelPadding: 10 + titleFontSize: 30 + titlePadding: 20 + tickLength: 10 + tickWidth: 5 + axisLineWidth: 5 + chartOrientation: horizontal + plotReservedSpacePercent: 60 + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -204,20 +204,20 @@ config: it('Render with show axis title false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTitle: false - yAxis: - showTitle: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTitle: false + yAxis: + showTitle: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -226,20 +226,20 @@ config: it('Render with show axis label false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showLabel: false - yAxis: - showLabel: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showLabel: false + yAxis: + showLabel: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -248,20 +248,20 @@ config: it('Render with show axis tick false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showTick: false - yAxis: - showTick: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showTick: false + yAxis: + showTick: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -270,20 +270,20 @@ config: it('Render with show axis line false', () => { imgSnapshotTest( ` ---- -config: - xyChart: - xAxis: - showAxisLine: false - yAxis: - showAxisLine: false ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + xyChart: + xAxis: + showAxisLine: false + yAxis: + showAxisLine: false + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); @@ -292,28 +292,28 @@ config: it('Render all the theme color', () => { imgSnapshotTest( ` ---- -config: - themeVariables: - xyChart: - titleColor: "#ff0000" - backgroundColor: "#f0f8ff" - yAxisLabelColor: "#ee82ee" - yAxisTitleColor: "#7fffd4" - yAxisTickColor: "#87ceeb" - yAxisLineColor: "#ff6347" - xAxisLabelColor: "#7fffd4" - xAxisTitleColor: "#ee82ee" - xAxisTickColor: "#ff6347" - xAxisLineColor: "#87ceeb" - plotColorPalette: "#008000, #faba63" ---- - xychart-beta - title "Sales Revene" - x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] - y-axis "Revenue (in $)" 4000 --> 11000 - bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] - line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + --- + config: + themeVariables: + xyChart: + titleColor: "#ff0000" + backgroundColor: "#f0f8ff" + yAxisLabelColor: "#ee82ee" + yAxisTitleColor: "#7fffd4" + yAxisTickColor: "#87ceeb" + yAxisLineColor: "#ff6347" + xAxisLabelColor: "#7fffd4" + xAxisTitleColor: "#ee82ee" + xAxisTickColor: "#ff6347" + xAxisLineColor: "#87ceeb" + plotColorPalette: "#008000, #faba63" + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `, {} ); diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 255c3c089..964a1e6da 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -33,7 +33,7 @@ xychart-beta ## Syntax > **Note** -> all text values can be single word without ", if multiple line required we have to use ". +> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ### Orientations @@ -49,7 +49,7 @@ The title is a short description of the chart and it will always render on top o #### Example xychart-beta - title "This is a sample example" + title "This is a simple example" ... > **Note** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts index 18e48f54c..c3240a4a7 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/baseAxis.ts @@ -51,6 +51,7 @@ export abstract class BaseAxis implements Axis { setAxisPosition(axisPosition: AxisPosition): void { this.axisPosition = axisPosition; + this.setRange(this.range); } abstract getScaleValue(value: number | string): number; @@ -174,7 +175,7 @@ export abstract class BaseAxis implements Axis { this.boundingRect.y = point.y; } - private getDrawaableElementsForLeftAxis(): DrawableElem[] { + private getDrawableElementsForLeftAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; @@ -250,7 +251,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForBottomAxis(): DrawableElem[] { + private getDrawableElementsForBottomAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; @@ -326,7 +327,7 @@ export abstract class BaseAxis implements Axis { } return drawableElement; } - private getDrawaableElementsForTopAxis(): DrawableElem[] { + private getDrawableElementsForTopAxis(): DrawableElem[] { const drawableElement: DrawableElem[] = []; if (this.showAxisLine) { const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; @@ -405,16 +406,16 @@ export abstract class BaseAxis implements Axis { getDrawableElements(): DrawableElem[] { if (this.axisPosition === 'left') { - return this.getDrawaableElementsForLeftAxis(); + return this.getDrawableElementsForLeftAxis(); } if (this.axisPosition === 'right') { throw Error('Drawing of right axis is not implemented'); } if (this.axisPosition === 'bottom') { - return this.getDrawaableElementsForBottomAxis(); + return this.getDrawableElementsForBottomAxis(); } if (this.axisPosition === 'top') { - return this.getDrawaableElementsForTopAxis(); + return this.getDrawableElementsForTopAxis(); } return []; } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 7bd27c1a9..7271c0468 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -31,7 +31,7 @@ let tmpSVGGElem: SVGGType; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); -let xyChartData: XYChartData = getChartDefalutData(); +let xyChartData: XYChartData = getChartDefaultData(); let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let hasSetXAxis = false; let hasSetYAxis = false; @@ -54,7 +54,7 @@ function getChartDefaultConfig(): XYChartConfig { ); } -function getChartDefalutData(): XYChartData { +function getChartDefaultData(): XYChartData { return { yAxis: { type: 'linear', @@ -201,7 +201,7 @@ const clear = function () { commonClear(); plotIndex = 0; xyChartConfig = getChartDefaultConfig(); - xyChartData = getChartDefalutData(); + xyChartData = getChartDefaultData(); xyChartThemeConfig = getChartDefaultThemeConfig(); plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); hasSetXAxis = false; diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index ef089eb43..3b3060181 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -18,7 +18,7 @@ xychart-beta ## Syntax ```note -all text values can be single word without ", if multiple line required we have to use ". +All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` ``` ### Orientations @@ -38,7 +38,7 @@ The title is a short description of the chart and it will always render on top o ``` xychart-beta - title "This is a sample example" + title "This is a simple example" ... ```