Hello everyone, I am trying to create a linear pie chart, where I have two or more shapes inside a container and the widths of those shapes to be dynamic based on some values that I pull from the database. The problem is that I can only add a fixed value for the width of a shape either in pixels or percentage. Has anyone done anything similar to this or know how / if it can even be achieved? Thank you.
Bubble doesn’t support dynamic heights or widths.
So you need to use CSS to do it.
Just give your element an ID and apply some style rules to it in an HTML element.
Just curious, what’s the maximum number of “pie pieces” you anticipate having? Are we talking just a few? Tens of pieces?
No, just 2 or 3. I found a plugin that seems to work dynamic width Plugin | Bubble
Yes, I managed to do it with a plugin where I add an html element to the page like you said and in there I create a dynamic expression to make the shape longer or shorter
Here’s an implementation using just Bubble and custom CSS - no plugin…
It uses just an empty RG (if no labels needed) or a RG with a single text element (with labels), so it’s pretty lightweight. It’s wrapped in a reusable element, so the user (Bubble dev) just passes in the lists and need know nothing about CSS. The number of pie pieces is automatically set based on the list item count. (There are no sanity checks, so the onus is entirely on the dev to make sure the lists have the same number of items and the percentages all add up to exactly 100.)
Anyway, glad you got it worked out. I’ll surely be using it in a dashboard at some point.
ohh ok.. nice. I’ll try it this way. Thank you