Line Chart with Baseline

caumberg · 2025-04-03T16:15:09.085Z

I’ve got a line chart to plot a number (UPLH) and I want to display a baseline or target line on the chart, to imply anything above the line is target met and below the line is target not met.

I’m using the Air Line Chart Lite free plugin (linked below), but I’m not opposed to changing to a different plugin if it means I can have the target line.

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

image1410×709 20.6 KB

aleemansari97 · 2025-04-03T16:52:32.230Z

What’s the problem with your current plugin? Does it not allow you to plot multiple series of data simultaneously?

caumberg · 2025-04-03T17:49:11.031Z

It does. But it’s pulling that info from the database that the repeating group to the left of the chart is referencing. I don’t know how to make a static target line across the chart that won’t show a data label on every date for the target value. Plus I’m not even sure what I would reference to make that.

aleemansari97 · 2025-04-04T11:33:28.125Z

I honestly thought of having fixed values in an option set and using it as the reference.

But this approach doesn’t solve the issue of you having to deal with target values for every date

caumberg · 2025-04-04T12:27:53.722Z

Any idea if there’s a way to customize the background color of the graph where the background below 5.0 comes up as a light red and above 5.0 is a light green? Perhaps that would work? Even if it’s on one of the other line chart plugins, I don’t mind switching.

aleemansari97 · 2025-04-04T13:26:35.624Z

Check out annotations on ApexCharts: A guide to annotating the charts – ApexCharts.js

I think this is what you’re looking for.

PS. I use this plugin for ApexCharts (it’s free and fully customizable): ApexCharts Plugin | Bubble

caumberg · 2025-04-04T13:29:52.357Z

My man! That looks like what I need. I’ll play around with it, but from what I can see, it should do it. Thank you!

aleemansari97 · 2025-04-04T13:38:41.276Z

Just a side note, make sure to format your default options this way (it won’t work otherwise)

Screenshot 2025-04-04 at 6.37.59 PM646×1348 147 KB

caumberg · 2025-04-04T15:12:55.504Z

Okay. That’s going to take me some time to decipher. The code that’s on the guide you linked doesn’t exactly seem to be copy/paste friendly and…well…there’s a reason I’m on Bubble, the no-code app builder

aleemansari97 · 2025-04-04T22:19:34.648Z

Bro, just give it to chatGPT and let it do its magic

caumberg · 2025-04-07T19:09:13.575Z

So I think the problem I’m running into now is that the ApexGPT they have on their website is adding annotation code when I ask it, but because the data being displayed is not written into the code itself, it isn’t visualizing the code.

image1015×796 45.6 KB

image738×281 9.61 KB