diff --git a/.changeset/soft-readers-tan.md b/.changeset/soft-readers-tan.md new file mode 100644 index 000000000..ec3fa97af --- /dev/null +++ b/.changeset/soft-readers-tan.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Dynamically Render Data Labels Within Bar Charts diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index 1245760e8..a582355e8 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/cypress/integration/rendering/xyChart.spec.js @@ -179,6 +179,7 @@ describe('XY Chart', () => { axisLineWidth: 5 chartOrientation: horizontal plotReservedSpacePercent: 60 + showDataLabel: true --- xychart-beta title "Sales Revenue" @@ -315,4 +316,516 @@ describe('XY Chart', () => { ); cy.get('svg'); }); + + it('should render vertical bar chart with labels', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + 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] + `, + {} + ); + }); + + it('should render horizontal bar chart with labels', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + 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] + `, + {} + ); + }); + + it('should render vertical bar chart without labels by default', () => { + imgSnapshotTest( + ` + 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] + `, + {} + ); + }); + + it('should render horizontal bar chart without labels by default', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + chartOrientation: horizontal + --- + 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] + `, + {} + ); + }); + + it('should render multiple bar plots vertically with labels correctly', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Multiple Bar Plots" + x-axis Categories [A, B, C] + y-axis "Values" 0 --> 100 + bar [10, 50, 90] + `, + {} + ); + }); + + it('should render multiple bar plots horizontally with labels correctly', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Multiple Bar Plots" + x-axis Categories [A, B, C] + y-axis "Values" 0 --> 100 + bar [10, 50, 90] + `, + {} + ); + }); + + it('should render a single bar with label for a vertical xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Single Bar Chart" + x-axis Categories [A] + y-axis "Value" 0 --> 100 + bar [75] + `, + {} + ); + }); + + it('should render a single bar with label for a horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Single Bar Chart" + x-axis Categories [A] + y-axis "Value" 0 --> 100 + bar [75] + `, + {} + ); + }); + + it('should render negative and decimal values with correct labels for vertical xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Decimal and Negative Values" + x-axis Categories [A, B, C] + y-axis -10 --> 10 + bar [ -2.5, 0.75, 5.1 ] + `, + {} + ); + }); + + it('should render negative and decimal values with correct labels for horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Decimal and Negative Values" + x-axis Categories [A, B, C] + y-axis -10 --> 10 + bar [ -2.5, 0.75, 5.1 ] + `, + {} + ); + }); + + it('should render data labels within each bar in the vertical xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,b,c] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + // Check horizontal alignment (within tolerance) + expect(textProps.x + textProps.width / 2).to.be.closeTo( + barProps.x + barProps.width / 2, + 5 + ); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + }); + }); + }); + }); + + it('should render data labels within each bar in the horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,b,c] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + expect(textProps.y + textProps.height / 2).to.be.closeTo( + barProps.y + barProps.height / 2, + 5 + ); + }); + }); + }); + }); + + it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + // Check horizontal alignment (within tolerance) + expect(textProps.x + textProps.width / 2).to.be.closeTo( + barProps.x + barProps.width / 2, + 5 + ); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + }); + }); + }); + }); + + it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s] + y-axis "Revenue (in $)" 4000 --> 12000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + expect(textProps.y + textProps.height / 2).to.be.closeTo( + barProps.y + barProps.height / 2, + 5 + ); + }); + }); + }); + }); + + it('should render data labels correctly for a bar in the vertical xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan] + y-axis "Revenue (in $)" 3000 --> 12000 + bar [4000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + // Check horizontal alignment (within tolerance) + expect(textProps.x + textProps.width / 2).to.be.closeTo( + barProps.x + barProps.width / 2, + 5 + ); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + }); + }); + }); + }); + + it('should render data labels correctly for a bar in the horizontal xy-chart', () => { + imgSnapshotTest( + ` + --- + config: + xyChart: + showDataLabel: true + chartOrientation: horizontal + --- + xychart-beta + title "Sales Revenue" + x-axis Months [jan] + y-axis "Revenue (in $)" 3000 --> 12000 + bar [4000] + `, + {} + ); + + cy.get('g.bar-plot-0').within(() => { + cy.get('rect').each(($rect, index) => { + // Extract bar properties + const barProps = { + x: parseFloat($rect.attr('x')), + y: parseFloat($rect.attr('y')), + width: parseFloat($rect.attr('width')), + height: parseFloat($rect.attr('height')), + }; + + // Get the text element corresponding to this bar by index. + cy.get('text') + .eq(index) + .then(($text) => { + const bbox = $text[0].getBBox(); + const textProps = { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height, + }; + + // Verify that the text label is positioned within the boundaries of the bar. + expect(textProps.x).to.be.greaterThan(barProps.x); + expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width); + + expect(textProps.y).to.be.greaterThan(barProps.y); + expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height); + expect(textProps.y + textProps.height / 2).to.be.closeTo( + barProps.y + barProps.height / 2, + 5 + ); + }); + }); + }); + }); }); diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index 7197b984d..235b4e337 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -107,17 +107,18 @@ xychart-beta ## Chart Configurations -| Parameter | Description | Default value | -| ------------------------ | ---------------------------------------------- | :-----------: | -| width | Width of the chart | 700 | -| height | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| showTitle | Title to be shown or not | true | -| xAxis | xAxis configuration | AxisConfig | -| yAxis | yAxis configuration | AxisConfig | -| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | -| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | +| Parameter | Description | Default value | +| ------------------------ | ------------------------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | +| showDataLabel | Should show the value corresponding to the bar within the bar | false | ### AxisConfig @@ -163,6 +164,7 @@ config: xyChart: width: 900 height: 600 + showDataLabel: true themeVariables: xyChart: titleColor: "#ff0000" @@ -181,6 +183,7 @@ config: xyChart: width: 900 height: 600 + showDataLabel: true themeVariables: xyChart: titleColor: "#ff0000" diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index d06a844d9..7d435512b 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -951,6 +951,10 @@ export interface XYChartConfig extends BaseDiagramConfig { * Top and bottom space from the chart title */ titlePadding?: number; + /** + * Should show the value corresponding to the bar within the bar + */ + showDataLabel?: boolean; /** * Should show the chart title */ diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts index 3d188895f..5f6f862ee 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts @@ -93,6 +93,7 @@ export interface XYChartConfig { titleFontSize: number; titlePadding: number; showTitle: boolean; + showDataLabel: boolean; xAxis: XYChartAxisConfig; yAxis: XYChartAxisConfig; chartOrientation: 'vertical' | 'horizontal'; diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index fb2435df2..9ad7cd420 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -195,6 +195,10 @@ function getChartConfig() { return xyChartConfig; } +function getXYChartData() { + return xyChartData; +} + const clear = function () { commonClear(); plotIndex = 0; @@ -226,4 +230,5 @@ export default { setTmpSVGG, getChartThemeConfig, getChartConfig, + getXYChartData, }; diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts index 1f4d36e8a..b86c8556e 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts @@ -14,6 +14,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const db = diagObj.db as typeof XYChartDB; const themeConfig = db.getChartThemeConfig(); const chartConfig = db.getChartConfig(); + const labelData = db.getXYChartData().plots[0].data.map((data) => data[1]); function getDominantBaseLine(horizontalPos: TextVerticalPos) { return horizontalPos === 'top' ? 'text-before-edge' : 'middle'; } @@ -49,6 +50,16 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram const groups: Record = {}; + interface BarItem { + data: { + x: number; + y: number; + width: number; + height: number; + }; + label: string; + } + function getGroup(gList: string[]) { let elem = group; let prefix = ''; @@ -87,6 +98,113 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram .attr('fill', (data) => data.fill) .attr('stroke', (data) => data.strokeFill) .attr('stroke-width', (data) => data.strokeWidth); + + if (chartConfig.showDataLabel) { + if (chartConfig.chartOrientation === 'horizontal') { + // Factor to approximate each character's width. + const charWidthFactor = 0.7; + + // Filter out bars that have zero width or height. + const validItems = shape.data + .map((d, i) => ({ data: d, label: labelData[i].toString() })) + .filter((item) => item.data.width > 0 && item.data.height > 0); + + // Helper function to check if the text fits horizontally with a 10px right margin. + function fitsHorizontally(item: BarItem, fontSize: number): boolean { + const { data, label } = item; + // Approximate the text width. + const textWidth: number = fontSize * label.length * charWidthFactor; + // The available width is the bar's width minus a 10px right margin. + return textWidth <= data.width - 10; + } + + // For each valid bar, start with an initial candidate font size (70% of the bar's height), + // then reduce it until the text fits horizontally. + const candidateFontSizes = validItems.map((item) => { + const { data } = item; + let fontSize = data.height * 0.7; + // Decrease fontSize until the text fits horizontally. + while (!fitsHorizontally(item, fontSize) && fontSize > 0) { + fontSize -= 1; + } + return fontSize; + }); + + // Choose the smallest candidate font size across all valid bars for uniformity. + const uniformFontSize = Math.floor(Math.min(...candidateFontSizes)); + + shapeGroup + .selectAll('text') + .data(validItems) + .enter() + .append('text') + .attr('x', (item) => item.data.x + item.data.width - 10) + .attr('y', (item) => item.data.y + item.data.height / 2) + .attr('text-anchor', 'end') + .attr('dominant-baseline', 'middle') + .attr('fill', 'black') + .attr('font-size', `${uniformFontSize}px`) + .text((item) => item.label); + } else { + const yOffset = 10; + + // filter out bars that have zero width or height. + const validItems = shape.data + .map((d, i) => ({ data: d, label: labelData[i].toString() })) + .filter((item) => item.data.width > 0 && item.data.height > 0); + + // Helper function that checks if the text with a given fontSize fits within the bar boundaries. + function fitsInBar(item: BarItem, fontSize: number, yOffset: number): boolean { + const { data, label } = item; + const charWidthFactor = 0.7; + const textWidth = fontSize * label.length * charWidthFactor; + + // Compute horizontal boundaries using the center. + const centerX = data.x + data.width / 2; + const leftEdge = centerX - textWidth / 2; + const rightEdge = centerX + textWidth / 2; + + // Check that text doesn't overflow horizontally. + const horizontalFits = leftEdge >= data.x && rightEdge <= data.x + data.width; + + // For vertical placement, we use 'dominant-baseline: hanging' so that y marks the top of the text. + // Thus, the bottom edge is y + yOffset + fontSize. + const verticalFits = data.y + yOffset + fontSize <= data.y + data.height; + + return horizontalFits && verticalFits; + } + + // For each valid item, start with a candidate font size based on the width, + // then reduce it until the text fits within both the horizontal and vertical boundaries. + const candidateFontSizes = validItems.map((item) => { + const { data, label } = item; + let fontSize = data.width / (label.length * 0.7); + + // Decrease the font size until the text fits or fontSize reaches 0. + while (!fitsInBar(item, fontSize, yOffset) && fontSize > 0) { + fontSize -= 1; + } + return fontSize; + }); + + // Choose the smallest candidate across all valid bars for uniformity. + const uniformFontSize = Math.floor(Math.min(...candidateFontSizes)); + + // Render text only for valid items. + shapeGroup + .selectAll('text') + .data(validItems) + .enter() + .append('text') + .attr('x', (item) => item.data.x + item.data.width / 2) + .attr('y', (item) => item.data.y + yOffset) + .attr('text-anchor', 'middle') + .attr('dominant-baseline', 'hanging') + .attr('fill', 'black') + .attr('font-size', `${uniformFontSize}px`) + .text((item) => item.label); + } + } break; case 'text': shapeGroup diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index e6e969462..96a56e2a7 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -95,17 +95,18 @@ xychart-beta ## Chart Configurations -| Parameter | Description | Default value | -| ------------------------ | ---------------------------------------------- | :-----------: | -| width | Width of the chart | 700 | -| height | Height of the chart | 500 | -| titlePadding | Top and Bottom padding of the title | 10 | -| titleFontSize | Title font size | 20 | -| showTitle | Title to be shown or not | true | -| xAxis | xAxis configuration | AxisConfig | -| yAxis | yAxis configuration | AxisConfig | -| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | -| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | +| Parameter | Description | Default value | +| ------------------------ | ------------------------------------------------------------- | :-----------: | +| width | Width of the chart | 700 | +| height | Height of the chart | 500 | +| titlePadding | Top and Bottom padding of the title | 10 | +| titleFontSize | Title font size | 20 | +| showTitle | Title to be shown or not | true | +| xAxis | xAxis configuration | AxisConfig | +| yAxis | yAxis configuration | AxisConfig | +| chartOrientation | 'vertical' or 'horizontal' | 'vertical' | +| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | +| showDataLabel | Should show the value corresponding to the bar within the bar | false | ### AxisConfig @@ -152,6 +153,7 @@ config: xyChart: width: 900 height: 600 + showDataLabel: true themeVariables: xyChart: titleColor: "#ff0000" diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index ab05bbe50..9c8e0bd33 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1228,6 +1228,10 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) type: number default: 10 minimum: 0 + showDataLabel: + description: Should show the value corresponding to the bar within the bar + type: boolean + default: false showTitle: description: Should show the chart title type: boolean