marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6475 from Shahir-47/feature/5806_xy-chart-data-labels

Browse Source 
feat: Dynamically Render Data Labels Within Bar Charts
This commit is contained in:
Sidharth Vinod
2025-04-15 03:13:03 +00:00
committed by GitHub
parent bcaa40f1d5 11c3ac58fd
commit 0b57984d27
9 changed files with 677 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/soft-readers-tan.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Dynamically Render Data Labels Within Bar Charts

513
cypress/integration/rendering/xyChart.spec.js
View File

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

25
docs/syntax/xyChart.md
View File

@@ -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"

4
packages/mermaid/src/config.type.ts
View File

@@ -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
*/

1
packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
View File

@@ -93,6 +93,7 @@ export interface XYChartConfig {
titleFontSize: number;
titlePadding: number;
showTitle: boolean;
showDataLabel: boolean;
xAxis: XYChartAxisConfig;
yAxis: XYChartAxisConfig;
chartOrientation: 'vertical' | 'horizontal';

5
packages/mermaid/src/diagrams/xychart/xychartDb.ts
View File

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

118
packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
View File

@@ -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<string, any> = {};
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

24
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -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"

4
packages/mermaid/src/schemas/config.schema.yaml
View File

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