# Observable Plot: Best way show Histogram count labels

**URL:** <https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358>\
**Category:** Help\
**Created:** [December 1, 2022, 3:56pm UTC](https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358 "2022-12-01T15:56:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alecgregory](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@alecgregory](https://talk.observablehq.com/u/alecgregory)\
**Post date:** [December 1, 2022, 3:56pm UTC](https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358/1 "2022-12-01T15:56:48Z")

</div>

Hi everyone, I am appreciating observable plot. It’s really helped me understand data visualization with web technologies.

I have a question about showing value labels on a histogram

I have used a [group transform in observable plot](https://observablehq.com/@observablehq/plot-group?collection=@observablehq/plot) to create a histogram. The code below generates it, great!

```auto
const histFmCalc = Plot.plot({
  y: {
    label: "Innovation Count"
  },
  x: {
    label: "Years in development"
  },
  marks: [
    Plot.barY(
      innovations,
      Plot.groupX(
        {y: "count"},
        {
          x: "DEVELOPMENT_TIME",
          fill: "goldenrod"
        }
      )
    )
  ]
});

```

I want the count for each bar to show above it. I have managed to do this with `Plot.text`, but I’ve had to basically recreate the grouping function manually like so:

```auto
const innoHist = innovations.reduce((acc, curr) => {
  const newAcc = acc;
  if(newAcc[curr.DEVELOPMENT_TIME]) {
    newAcc[curr.DEVELOPMENT_TIME]++
  } else {
    newAcc[curr.DEVELOPMENT_TIME] = 1
  }
  return newAcc;
},
[]);

const innoHistIndex = innoHist.map((value, index, array) => index);

```

And then use these new arrays in my plot (see last line):

```auto
const histFmCalc = Plot.plot({
  y: {
    label: "Innovation Count"
  },
  x: {
    label: "Years in development"
  },
  marks: [
    Plot.barY(
      innovations,
      Plot.groupX(
        {y: "count"},
        {
          x: "DEVELOPMENT_TIME",
          fill: "goldenrod"
        },
      )
    ),
    Plot.text(innoHist, {x: innoHistIndex, y: innoHist, dy: -5})
  ]
});

```

I feel like there should be an easier and more efficient way to do this, is there?

I am including a screenshot of my histogram because I’m very proud of it.

 ![Screen Shot 2022-12-01 at 3.46.26 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/574b247f3b7b9b7f7cbaf85e0e8aae34c9b2e28f.png)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [December 1, 2022, 6:47pm UTC](https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358/2 "2022-12-01T18:47:37Z")

</div>

You can apply the group transform to the text mark, too, the same way you did to the bar. Then, add `text: "count"` to the output of the group transform for the text mark. For example:

> **[Plot.group + Plot.text](https://observablehq.com/d/7b8e5fe3c9368013)**
>
> Ref. https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358

To avoid repetition, you can also write a helper function like so:

```nohighlight
function groupBySport(outputs, options) {
  return Plot.groupY(
    { x: "count", ...outputs },
    { y: "sport", sort: { y: "x", reverse: true }, ...options }
  );
}

```

Then to use:

 ![untitled (67)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a49aa6301fa15d18a6d777bc267db16b200a9d10.png)

```nohighlight
Plot.plot({
  marginLeft: 100,
  marginRight: 40,
  marks: [
    Plot.barX(olympians, groupBySport()),
    Plot.text(olympians, groupBySport({text: "count"}, {frameAnchor: "left", dx: 3}))
  ]
})

```

---

<div class="post-metadata">

**Author:** ![alecgregory](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@alecgregory](https://talk.observablehq.com/u/alecgregory)\
**Post date:** [December 3, 2022, 12:35am UTC](https://talk.observablehq.com/t/observable-plot-best-way-show-histogram-count-labels/7358/3 "2022-12-03T00:35:56Z")

</div>

Fantastic, thank you. As well as solving this problem, your post as given me a deeper understanding of transforms.

For reference here’s the code I ended up with

```auto
const histFmCalc = Plot.plot({
  y: {
    label: "Innovation Count"
  },
  x: {
    label: "Years in development"
  },
  marks: [
    Plot.barY(
      innovations,
      groupByDevelopmentTime(null, {fill: "goldenrod"})
    ),
    Plot.text(
      innovations,
      groupByDevelopmentTime({text: "count"}, {dy: -5})
    )
  ]
});

const groupByDevelopmentTime = (outputs, options) => {
  return Plot.groupX(
    { y: "count", ...outputs },
    { x: "DEVELOPMENT_TIME", ...options }
  );
}

```