# Custom tooltip label with stacked chart

**URL:** https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874
**Category:** Help
**Created:** [October 2, 2024, 9:00pm UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874 "2024-10-02T21:00:35Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![mkfreeman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mkfreeman/32/2988_2.png) [@mkfreeman](https://talk.observablehq.com/u/mkfreeman)
#### Post date: [October 2, 2024, 9:00pm UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/1 "2024-10-02T21:00:35Z")

</div>

In [this notebook](https://observablehq.com/d/569820eaae4023f5), I’m using an `offset: normalize` stack transform to create a stacked bar chart. I want to have a tooltip that displays the specific label “Percent: ##”, but without changing the underlying data, I can’t figure out how to customize the label.

```js
// Current approach
channels: {
        customY: {
          label: "Percent",
          value: (d) => {
            // The value of d has the data values before normalization
            return d.population;
          }
        }
      },
      tip: {
        // Display custom values, hide the auto generated values
        format: {
          customY: true,
          test: (d) => d.population, // doesn't do anything
          y: true,
          x: true,
          fill: true
        }
      }

```

Seems similar to [this topic](https://talk.observablehq.com/t/pointer-transforms-with-px-py-on-stacked-bar-charts/8302).

Any thoughts?

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [October 7, 2024, 8:59am UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/2 "2024-10-07T08:59:29Z")

</div>

Hi Mike, would you mind moving this question to the [Plot discussions board](https://github.com/observablehq/plot/discussions)? Thanks!

> [@Observable Support Channels](https://talk.observablehq.com/t/observable-support-channels/9707):
>
> Hey Observable users! We’ve made updates to our user support channels, so it’s easier to find answers to common Framework, Plot, D3 and Observable platform questions. For the following topics, please use these channels: Observable platform: here on the [Forum](https://talk.observablehq.com/)! There are new categories for [Notebooks](https://talk.observablehq.com/c/notebooks/16) and [Data Apps](https://talk.observablehq.com/c/data-apps/15), as well as the general [Community Help](https://talk.observablehq.com/c/help/6) category. Observable Framework [Observable Framework GitHub discussion board](https://github.com/observablehq/framework/discussions) Observable Plot: [Observable Plot GitHub discussion board](https://github.com/observablehq/plot/discussions) D3:…

---

<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 7, 2024, 9:47am UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/3 "2024-10-07T09:47:58Z")

</div>

I don’t think the stack offset is the correct way to think about this, because it does the two operations at the same time (i.e., it takes the original values `{y: [1, 3]}` and converts them to a normalized stack `{y1: [0, 0.25], y2: [0.25, 1]}`). The numbers you want to show as tips would be the normalized `y`: `[0.25, 0.75]`.

But you could try this:

```auto
Plot.barY(
  tidy,
  Plot.normalizeY("sum", {
    x: "state",
    y: "population",
    z: "state", // the series for normalizeY
    fill: "age",
    sort: { color: null, x: "-y" },
    offset: "normalize", // stack normalization (based on *x*)
    tip: {
      channels: {
        population: { value: "population", label: "abs population" }
      }
    }
  })
).plot({ y: { percent: true } })

```

---

<div class="post-metadata">

### Author: ![mkfreeman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mkfreeman/32/2988_2.png) [@mkfreeman](https://talk.observablehq.com/u/mkfreeman)
#### Post date: [October 7, 2024, 2:01pm UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/4 "2024-10-07T14:01:21Z")

</div>

Thanks @Fil! That’s close, but it is showing a custom label next to the absolute value. Is there a way to change the label next to the percentage label (not the total, but the percentage?). I was able to get it by just changing the data, which wasn’t too bad:

```js
 Plot.tip(
      tidy.map((d) => {
        d.percent = d.population;
        return d;
      }),
      {
        ...Plot.pointer(
          Plot.stackY({
            x: "state",
            y: "percent",
            fill: "age",
            sort: { color: null, x: "-y" },
            offset: "normalize"
          })
        )
      }
    )

```

(@mootari I’ll post future questions to the GitHub board)

---

<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: [October 7, 2024, 2:11pm UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/5 "2024-10-07T14:11:11Z")

</div>

Please move this discussion to GitHub. Thank you!

---

<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: [October 7, 2024, 2:11pm UTC](https://talk.observablehq.com/t/custom-tooltip-label-with-stacked-chart/9874/6 "2024-10-07T14:11:20Z")

</div>


