# Adding Plot text mark for n value (sum/count) of each facet

**URL:** <https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672>\
**Category:** Help\
**Created:** [October 11, 2021, 2:04pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672 "2021-10-11T14:04:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [October 11, 2021, 2:04pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/1 "2021-10-11T14:04:11Z")

</div>

Hi -  
I need to add a text mark showing the sum or count represented for each bar in faceted stacked bars. For example, in [Stack Transform / Observable Plot / Observable / Observable](https://observablehq.com/@observablehq/plot-stack?collection=@observablehq/plot#cell-723), I would want a text mark to the right of each bar saying something like n = 1000 or (1000 people total) indicating the number of people represented by each bar.

Thanks for any help!  
Evan

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [October 11, 2021, 2:25pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/2 "2021-10-11T14:25:03Z")

</div>

use `text: "count"` instead of `text: "first"`?

or, with a function reducer:

```auto
Plot.plot({
  height: 280,
  x: {
    percent: true
  },
  facet: {
    data: congress,
    y: (d) => Math.floor((2021 - d.birth) / 10) * 10
  },
  marks: [
    Plot.barX(
      congress,
      Plot.stackX(Plot.groupZ({ x: "proportion-facet" }, { fill: "gender" }))
    ),
    Plot.text(
      congress,
      Plot.stackX(
        Plot.groupZ(
          { x: "proportion-facet", text: (d) => `${d[0].gender}: ${d.length}` },
          { z: "gender" }
        )
      )
    ),
    Plot.ruleX([0, 1])
  ]
})

```

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [October 11, 2021, 3:16pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/3 "2021-10-11T15:16:13Z")

</div>

Thanks! That makes sense, and I might end up using that instead of what I was thinking.

My idea was to display the total for the whole bar (so M + F) to the right of each bar and outside of the bar area (e.g., 24 for the top bar in the example). I see from your example how I can get grouped or overall totals. The issue I can’t seem to resolve is how to place the text mark at the end of the bar.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [October 11, 2021, 3:48pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/4 "2021-10-11T15:48:34Z")

</div>

The end of an horizontal bar is given either by stackX1 or stackX2, depending on which end you’re considering 🙂

[stackX1](https://github.com/observablehq/plot/blob/main/README.md#plotstackx1stack-options)

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [October 11, 2021, 5:38pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/5 "2021-10-11T17:38:56Z")

</div>

Thanks! Per your suggestion, I changed the text mark in the example to:  
Plot.text(congress,{dx: “1em”, …Plot.stackX2(Plot.groupZ({x: “proportion-facet”, text: “count”}))})  
which does exactly what I want.

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [October 11, 2021, 5:44pm UTC](https://talk.observablehq.com/t/adding-plot-text-mark-for-n-value-sum-count-of-each-facet/5672/6 "2021-10-11T17:44:59Z")

</div>

Just realized that this is more idiomatic (without the spread):  
Plot.text(congress,Plot.stackX2(Plot.groupZ({x: “proportion-facet”, text: “count”}, **{dx: “1em”}** )))