Custom tooltip label with stacked chart

Community Help
1

In this notebook, 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.

// 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.

Any thoughts?

2

Hi Mike, would you mind moving this question to the Plot discussions board? Thanks!

1 Like
3

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:

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 } })
4

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:

 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)

5

Please move this discussion to GitHub. Thank you!