Bar Chart: Labels

[errantmind]

Hello, I have a horizontal bar chart and wish to add labels on each individual bar (towards the end) with some extra data. You can see what I mean here.

Is this possible in Unovis? Sorry if I missed it somewhere.

[rokotyan]

@errantmind Yes, you can achieve that by using the XYLabels component. We don't have docs for it yet, but here's a brief code snippet for React to give you an example:

<VisXYContainer>
  <VisStackedBar data={data} x={d => d.x} y={accessors} />
  <VisXYLabels
    data={data}
    y={d => d.y / 2}
    x={d => d.x}
    label={d => `${d.y.toFixed(1)} bps`}
  />
  <VisAxis type='x' numTicks={10}/>
  <VisAxis type='y' tickFormat={(y: number) => `${y}bps`}/>
</VisXYContainer>

[errantmind]

Thanks! I'll give it a shot.

[conradfuhrman]

Hi all, we're just jumping into this library and are getting some very confusing results with the XYLabel component. We are using Vue3 not TS, but in a script setup.

We are using this for our Labels:

<VisXYLabels :data="formatLabelData(visitorsPerHour)" :y="(d) => d.y / 2" :x="(d) => d.x" :label="d => d.y" clustering="false" />

We've verified that the data is formatting properly and returning what we expect.

const formatLabelData = (visitorsPerHour) => {
  let labels = Object.entries(visitorsPerHour).map(([key, value]) => ({ x: Number(key), y: Number(value) })).filter(entry => entry.y !== 0)
  return labels
}

We've also tried using our data that we supply to the container but always get the same results. It appears it's clustering, but for a strange reason/position and I'm not sure why as you can see below. I'm not sure if there is an error with the Vue side of things, but we just can't seem to get this to work.

[rokotyan]

@conradfuhrman Can you try disabling clustering and write what happened? Also, a CodeSandbox example that reproduces the problem might be helpful.

[rokotyan]

Thanks, glad to hear that! Yes, a CodeSandbox would be very helpful as it would save a ton of time in reproducing the problem.

…

On Mar 6, 2024, at 08:33, crllnsmnn ***@***.***> wrote: @rokotyan <https://github.com/rokotyan> Would a CodeSandbox still be helpful? I could set something up, as I am also experiencing this problem (in Nuxt 3, without SSR, so I assume it is the same problem as in Vue). I deactivated clustering (:clustering="false"), but can only see the clustered clusterLabels. When I stringify the clusterLabel I can see my clustered objects, even though clustering should be deactivated. Besides that, I only started playing around with Unovis today, and it is a great experience, thank you! — Reply to this email directly, view it on GitHub <#204 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFYP7FQCKPIBDKDJLD5OHTYW5AN7AVCNFSM6AAAAAAYGWMZP6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DMOJWGI3DA>. You are receiving this because you were mentioned.

[crllnsmnn]

You can find a sandbox here.
When I use a static label (e.g. label="Test"), I can see three labels, but when I make it dynamic (:label="(d) => d.x") it seems to be clustering labels. Maybe there is something else I am doing wrong?

[rokotyan]

Thanks @crllnsmnn!

We've found an issue on our side and planning to fix it soon. I'll keep you posted