In your request, does the line need to display the label? (for example, would it need to show the “10.5” label?)
@arthurvee – thanks for reaching out as well! Hmm, that’s strange, I pay a lot of attention to performance, since it’s a priority for customers. Does the issue occur for you on the demo page? If not, please PM me a link to your app’s Bubble editor so I can take a closer look to see what might be going on in this case.
Hi @alex4, the user needs to see the average. I’d rather have the label next to the line, yes.
Now, a degraded option is to only have the line, and then mention at the bottom - in a text box below the chart- that it’s the average and showing the value.
But having it next to the line in a label is much better.
The workaround I came up with is to just create a separate group for the custom tooltip, and disable the “visible” attribute of that new group. Now when hovering the chart nothing shows up.
@underhill.dan you should be able to disable the tooltips by entering an custom tooltip HTML id that doesn’t exist on your page. For instance, you can just enter “do not show” (assuming you don’t have any Bubble elements with that HTML id on your page)
Hi @Frinet thanks for reaching out! That’s strange, I’m not able to reproduce that issue on my end. Could you PM me a link to your editor and point to where I can view your implementation? More than happy to take a look
I’m using a line chart to display a single series of numerical values where lower is better on a scale from 1 to 100. Is there some way to reverse the chart line so that the line goes up/higher with lower numbers, and vice versa?
I tried solving this by converting to negative numbers (e.g. 50 is -50) but it looks all kinds of bad when the values are displayed. Hoping there’s a better way
Also curious if there’s some setting to disable the hover effect which displays the name and value of single data points (I guess this may be called “ticks”? when the user hovers over the data point. In my use case, it’s redundant.
I am having a bit of difficulty with the speed at which charts are updating on my app. My backend is in firebase and I have probably ~15 charts on a dashboard which take anywhere from 1 second to 30 seconds to update. I’m not pulling alot of data and most of the calculations are being done through DigitalOcean.
Bit confused as to whether this is a Bubble issue or a JS charts issue.
Would you be able to assist by taking a look at my editor?
Probably/Hopefully easy, trying to remove decimal values from a chart. The x-axis is currently dynamic based on number of inputs. When it gets to a small number (ie, 1 or 2) decimals display. I would prefer to only display whole numbers. Ideas?
As long as your can get your data in a comma-separated list, you can display that data in the charts. Alternatively, if you don’t want to use JavaScript, you can try the using the “Basic List Calculator” or “RepeatingGroup to Chart” features from the documentation page: Chart.JS | Charts and Graphs for Bubble.io – not sure if this will apply to your use case but it’s worth a try!
@aanderson – thanks for the question. You should be able to adjust the Max X tick or Max Y Ticks property to change the granularity of your tick steps. For your case, you might want to change Max X Ticks to 3.
I believe youd have to repeat the value for every month.
That’s right! I am investigating what it would take to add an annotation feature to the chart. Stay tuned.
@proplytics thanks for reaching out as well! The plugin shouldn’t really have any issue rendering lots of datapoints (Chart JS is known for being performant). Did you try to see how long it takes for those numbers to load on your page in a simple text element? That could help you isolate where the slow parts are happening.
I’m loving the 100% Horizontal Stacked Bar chart.
I’m using it as a way to display data in a Gantt-type fashion.
I’m using the plugin to dynamically change the width of an element via an HTML tag. It works great.
When I link the graph in the same way, the overall box of the Chart element indeed resizes, but the bars remain the same length as the original width and get clipped off if I resize the Chart to be smaller in width.
Is there a way to trigger the Chart element to be redrawn based on the new updated width of its element?
Otherwise, I’d have to use a copy of the Chart element for each potential width that I may need to use. It would obviously be easier to just stick to using the one Chart and have it resize and redraw dynamically if the width gets changed. Just musing here.
I am trying to figure out how to do a multi-colored line in a line chart. Is there a way to set different colors based on the value of each data point? I am trying to design a simple line chart representing the evolution of temperatures over time. And I would like the data points (and the line between these points) to be of a different color depending on their value. For example, when temperature is above 30°C (or is in stage of alert), the data points are in red.
Hi @jonas28 – thanks for reaching out! Happy to hear you’ve found the plugin useful. Unfortunately, I don’t have the ability to change the app associated with your plugin. However, you can probably reach out to the Bubble support team (support@bubble.io) to handle that request. Feel free to CC me in the email at alex@techblocksco.com if you need me to provide context!
Hi @amielyoann thanks for reaching out! Cool use case by the way!
Currently, there is no way to customize the color of a line chart based on the Y value, but you might be able to achieve what you’re looking to do by creating a connected scatter chart and filtering multiple times and putting those values in different series. For instance, if you need the color to be different when the Y value is above 30C, you can filter one serie to be results above 30C, and another serie to be results below 30C. Each of those series could be a different color.
Not sure if that implementation will work based on your exact setup.
Alternatively, you can create bar charts that are multi-colored in a single serie by entering a string of the hex colors associated with that serie!
@underhill.dan – it’s been awhile, good to hear from you!
I want to make sure I understand your request–you’re using a separate plugin that enables users to make and element wider/narrower and you’d like the width of the Chart inside of it to change dynamically as well?