We are looking for a line bar that has 0 in the middle and depicts either a positive number with the chart filling in to the right of center, or negative number with chart filling in to the left of center. Kind of like a gauge so to speak:
Do Cornerstone charts or the stat bar have the ability to render that type of chart?
Hello @co50,
Thank you for the inquiry.
We’re not sure if this is what you’re looking for, but it looks like you can actually achieve this using the Statbar element. Insert a Div element, enable flexbox with row direction, then add 3 Stat Bar elements inside. Set the width to 33%, and disable the border radius of the primary and bar components.
Let us know if you need more info.
Best regards.
I’m not sure 3 stat bar elements would work? We need this to be functional, not purely cosmetic.
Basically, the stat bar, by default, starts at the left and fills in to the right based on how high the value is.
We want the bar that fills in to originate from the middle of the bar and fill in to the right if a positive number is assigned to it, and fill in to the left if a negative number is assigned to it.
Thank you for the clarification.
Yes, you might be able to use 3 stat bar elements to achieve this. Example below:
Animation: https://drive.google.com/file/d/1UKW3oywrG5KNriaY5dOFeFtrN-ItzU6f/view?usp=sharing
The direction of the first stat bar should be set to left and the third to right.
Best regards.
I’m still not understanding how this would work. If we’re populating the bar value dynamically, which of the 3 stat bars does the value get set in?
In the example above, you’ll need to define the value for each stat bar element – 30% in the first element, 0% in the middle, and 50% in the last stat bar element. Unfortunately, you cannot define negative values, as the bar will not fill up as expected.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
