Bar Chart: Labels #204
-
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. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 3 replies
-
@errantmind Yes, you can achieve that by using the <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> |
Beta Was this translation helpful? Give feedback.
-
Thanks! I'll give it a shot. |
Beta Was this translation helpful? Give feedback.
-
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:
We've verified that the data is formatting properly and returning what we expect.
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. |
Beta Was this translation helpful? Give feedback.
-
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.
|
Beta Was this translation helpful? Give feedback.
@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: