diff --git a/packages/chart/index.html b/packages/chart/index.html
index d906fb6fa0..ab339bdad8 100644
--- a/packages/chart/index.html
+++ b/packages/chart/index.html
@@ -34,9 +34,11 @@
Stacked:
-
+
Bar:
+ Percentage:
+
@@ -75,6 +77,14 @@
.lazyRender();
}
}
+
+ function doPercentage(percentage) {
+ if (app) {
+ app
+ .showValueAsPercent(percentage ? "domain" : undefined)
+ .lazyRender();
+ }
+ }
diff --git a/packages/chart/src/Column.ts b/packages/chart/src/Column.ts
index a33d5b9f02..e9b7a1f5c5 100644
--- a/packages/chart/src/Column.ts
+++ b/packages/chart/src/Column.ts
@@ -88,6 +88,7 @@ export class Column extends XYAxis {
if (this.useClonedPalette()) {
this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
}
+ const formatPct = d3Format(context.showValueAsPercentFormat());
let dataLen = 10;
let offset = 0;
@@ -202,11 +203,11 @@ export class Column extends XYAxis {
switch (context.showValueAsPercent()) {
case "series":
const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
- valueText = d3Format(context.showValueAsPercentFormat())(valueText / seriesSum);
+ valueText = formatPct(valueText / seriesSum);
break;
case "domain":
- const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[d.idx - 1];
- valueText = d3Format(context.showValueAsPercentFormat())(valueText / domainSum);
+ const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
+ valueText = formatPct(valueText / domainSum);
break;
case null:
default:
@@ -391,7 +392,7 @@ export class Column extends XYAxis {
pos.y = dataRect.y + (dataRect.height / 2);
}
} else { // Bar
- noRoomInside = context.yAxisStacked() ? false : dataRect.width < textSize.width;
+ noRoomInside = dataRect.width < textSize.width;
isOutside = !context.valueCentered() || noRoomInside;
pos.y = dataRect.y + (dataRect.height / 2);
@@ -431,7 +432,8 @@ export class Column extends XYAxis {
// Prevent overlapping labels on stacked columns
const columns = context.columns();
- const hideValue = isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1;
+ const hideValue = (context.yAxisStacked() && noRoomInside) ||
+ (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
context.textLocal.get(this)
.pos(pos)
.anchor(valueAnchor)
diff --git a/packages/chart/src/test.ts b/packages/chart/src/test.ts
index 82c6605024..56b0b40722 100644
--- a/packages/chart/src/test.ts
+++ b/packages/chart/src/test.ts
@@ -13,8 +13,8 @@ export class Test3 extends Column {
.columns(["", "Dismissed", "Pending", "Assigned"])
.data([
["Joe Cocker", 10, 1, 10],
- ["Steve Tyler", 18, 1, 12],
- ["Einar Solberg", 19, 1, 21]
+ ["Steve Tyler", 20, 2, 11],
+ ["Einar Solberg", 30, 3, 12]
])
// .paletteID("siuReportPalette")
.showValue(true)
@@ -30,7 +30,7 @@ export class Test3 extends Column {
.valueCentered(true)
.valueAnchor("middle")
// .xAxisSeriesPaddingInner(3)
- // .yAxisStacked(true)
+ .yAxisStacked(true)
.yAxisGuideLines(true)
.yAxisHidden(true)
.xAxisHidden(false)