Thank you Fil. That works nicely, now I just need space between that sum and the top of each vertical stacked bar. I have tried with a marginBottom and labelOffset to no avail. Cannot find anything in documentation. Here is what I have so far (note the marginBottom doesn’t work):
var plot2 = oPlot.plot({
marginBottom: 5,
marginTop:20,
width: 928,
height: 500,
x: { label: null },
y: {
tickFormat: ".0f",
tickSpacing: 20,
label: "PRA ($M)",
labelAnchor: "center",
labelOffset: 40
},
color:
{
legend: "ramp",
width: 540,
label: null,
range: data.Colors
},
marks: [
oPlot.axisX({ ticks: [] }), //to hide xaxis ticks
oPlot.barY(tidy, {
x: "fundType",
y: "total",
insetLeft: 13,
insetRight: 13,
fill: "pra",
sort: { color: null, x: "-y" }
}),
oPlot.text( //this section is what gets us our totals at the top of each vertical stacked bar
tidy,
oPlot.groupX(
{
y: "sum",
text: (funds) => d3.sum(funds).toLocaleString("en-US", {
minimumFractionDigits: 0, // Hide cents (if exact dollar).
maximumFractionDigits: 0, // Round to the nearest dollar.
marginBottom: 20
}),
},
{ x: "fundType", y: "total", text: "total" }
)),
oPlot.textY( //this section gets us our individual bars (by PRA) in each vertical stacked bar
tidy,
oPlot.stackY(
{
x: "fundType",
z: "pra",
y: "total",
text: (d) => (d.total < 50 ? null :
(d.total).toLocaleString("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
})
),
}
)
)
]
});
And please see attached screenshot for how it looks.
