How to label a normalized, stacked bar chart?

[mhkeller]

I have a stacked bar chart where I'm using the offset: 'normalize' option to turn my counts per year into percentages. I wanted to label this number in the center of each group but I'm not coming up with the right combination. I was looking at how Observable/plot does it but the syntax seems a bit different. Adding a vg.text element after the vg.barY doesn't overlay the two, it bumps the bar chart out of view and setting text to vg.count() doesn't seem right since that doesn't print the percentage value.

vg.plot(vg.barY(vg.from(tableName), {
        x: 'year',
        y: vg.count(),
        z: 'my_group',
        fill: 'my_group',
        order: 'z',
        offset: 'normalize',
        reverse: true,
      }),
      vg.yTickFormat('%'), 
      vg.yLabel('Percentage of Events'),
      vg.xLabel('Year'),
      vg.width(width),
      vg.height(height * 0.8),
      vg.marginLeft(60),
      vg.marginBottom(40),
      vg.marginTop(20),
      // vg.text(vg.from(tableName), {
      //   text: vg.count(), // This isn't right. it doesn't print out the normalized percentage value
      //   x: 'year',
      //   y: vg.count(),
      //   z: 'my_group',
      //   order: 'z',
      //   offset: 'normalize',
      //   reverse: true,
      // }))

[eleanorpd]

The vg.text element is indeed creating another plot, of type text, on the same y-axis as your normalized one. For the text chart, the y-axis is vg.count() rather than the normalized value. I think this is because offset only applies to stacked mark types.

One workaround could be to add tip: true to the barY element, which does show the normalized amount in the tooltip.

[jheer]

This is exactly right. Stack transform options like offset are only automatically applied within specific marks like barY and areaY. This behavior is inherited from Observable Plot. Meanwhile, vgplot does not currently include a "manual" stack transform to force stacking of other mark types.

This post describes how this is done in Observable Plot, I'd prefer to find a more direct path (similar to what you've tried to do here) if we added more stacking options to vgplot: https://talk.observablehq.com/t/how-to-display-text-in-each-level-of-a-stacked-bar-chart-made-with-plot/6510/2

[mhkeller]

Makes sense. Thanks for the help!

Purely from a user-perspective with no insight into how consistent or logical this is architecturally, maybe something like this would be most intuitive?

vg.plot(vg.barY(vg.from(tableName), {
        x: 'year',
        y: vg.count(),
        z: 'my_group',
        fill: 'my_group',
        order: 'z',
        offset: 'normalize',
        reverse: true,
        label: 'y' // <-- this would display the y value, taking into account that it's using the `offset`. This might be a wildly incorrect usage of 'y' as a shorthand though. The library would also have to have custom logic for each mark type on where to place that text label.
      }),