diff --git a/demos/xychart.html b/demos/xychart.html
index 4f2711016..4017cc86f 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -69,7 +69,7 @@
y-axis Animals 10 --> 200
bar [["dogs" [52, 96, 35, 10, 87, 34, 67, 99]],["cats" [15, 7, 23, 55, 11, 41, 26, 3]]]
-
+
XY Charts bar horizontal with multiple datasets
xychart-beta horizontal
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
index 8d4c3aa1e..753d1d345 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
@@ -18,52 +18,52 @@ export class BarPlot {
this.xAxis.getScaleValue(d[0]),
this.yAxis.getScaleValue(d[1]),
]);
-
+
const barPaddingPercent = 0.05;
const barWidth =
Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
(1 - barPaddingPercent);
const barWidthHalf = barWidth / 2;
-
+
if (this.orientation === 'horizontal') {
return {
- groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
- type: 'rect',
- data: finalData.map((data, index) => {
- const x = offset[index] + this.boundingRect.x;
- const width = data[1] - this.boundingRect.x;
- offset[index] += width;
- return {
- x,
- y: data[0] - barWidthHalf,
- height: barWidth,
- width,
- fill: barData.fill,
- strokeWidth: 0,
- strokeFill: barData.fill,
- }
- }),
- };
- }
- return {
groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
type: 'rect',
data: finalData.map((data, index) => {
- const y = data[1] - offset[index];
- const height = this.boundingRect.y + this.boundingRect.height - data[1];
- offset[index] += height;
+ const x = offset[index] + this.boundingRect.x;
+ const width = data[1] - this.boundingRect.x;
+ offset[index] += width;
return {
- x: data[0] - barWidthHalf,
- y,
- width: barWidth,
- height,
+ x,
+ y: data[0] - barWidthHalf,
+ height: barWidth,
+ width,
fill: barData.fill,
strokeWidth: 0,
strokeFill: barData.fill,
};
}),
};
- });
+ }
+ return {
+ groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
+ type: 'rect',
+ data: finalData.map((data, index) => {
+ const y = data[1] - offset[index];
+ const height = this.boundingRect.y + this.boundingRect.height - data[1];
+ offset[index] += height;
+ return {
+ x: data[0] - barWidthHalf,
+ y,
+ width: barWidth,
+ height,
+ fill: barData.fill,
+ strokeWidth: 0,
+ strokeFill: barData.fill,
+ };
+ }),
+ };
+ });
}
}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
index 1eea56436..d21b70ca6 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -57,11 +57,11 @@ export class BasePlot implements Plot {
throw Error('Axes must be passed to render Plots');
}
const drawableElem: DrawableElem[] = [];
- const linePlots = this.chartData.plots.filter(plot => plot.type === 'line') as LinePlotData[];
- const barPlots = this.chartData.plots.filter(plot => plot.type === 'bar') as BarPlotData[];
+ const linePlots = this.chartData.plots.filter((plot) => plot.type === 'line') as LinePlotData[];
+ const barPlots = this.chartData.plots.filter((plot) => plot.type === 'bar') as BarPlotData[];
let plotIndex = 0;
- if(linePlots.length) {
+ if (linePlots.length) {
const linePlot = new LinePlot(
linePlots[0],
this.xAxis,
@@ -71,7 +71,7 @@ export class BasePlot implements Plot {
);
drawableElem.push(...linePlot.getDrawableElement());
}
- if(barPlots.length) {
+ if (barPlots.length) {
const barPlot = new BarPlot(
barPlots,
this.boundingRect,
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index e4da42b65..d79e20f87 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -335,10 +335,9 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith([[
- { text: 'barTitle', type: 'text' },
- [23, 45, 56.6, 0.22]
- ]]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle', type: 'text' }, [23, 45, 56.6, 0.22]],
+ ]);
});
it('parse bar Data spaces and +,- symbol', () => {
const str =
@@ -346,10 +345,9 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith([[
- { text: 'barTitle with space', type: 'text' },
- [23, -45, 56.6]
- ]]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle with space', type: 'text' }, [23, -45, 56.6]],
+ ]);
});
it('parse bar Data without plot title', () => {
const str =
@@ -392,18 +390,12 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith([[
- { text: 'barTitle1', type: 'text' },
- [23, 45, 56.6]
- ]]);
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- [
- [
- { text: 'barTitle2', type: 'text' },
- [13, 42, 56.89]
- ],
- ],
- );
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
+ ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
+ ]);
expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23]
@@ -432,14 +424,12 @@ describe('Testing xychart jison file', () => {
{ text: 'category 2', type: 'text' },
{ text: 'category3', type: 'text' },
]);
- expect(mockDB.setBarData).toHaveBeenCalledWith([[
- { text: 'barTitle1', type: 'text' },
- [23, 45, 56.6]
- ]]);
- expect(mockDB.setBarData).toHaveBeenCalledWith([[
- { text: 'barTitle2', type: 'text' },
- [13, 42, 56.89]
- ]]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
+ ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith([
+ [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
+ ]);
expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23]
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 65b7d3b66..218085769 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -172,7 +172,7 @@ function setLineData(title: NormalTextType, data: number[]) {
type NamedDataset = [title: NormalTextType, data: number[]];
function setBarData(datasets: NamedDataset[]) {
- datasets.forEach(dataset => {
+ datasets.forEach((dataset) => {
const plotData = transformDataWithoutCategory(dataset[1]);
xyChartData.plots.push({
type: 'bar',