Line charts and graphs

Get Help
1

Hi everyone,

I’m currently working with line charts in Adalo, but I’m running into some limitations. I don’t find Adalo’s default line charts very visually appealing. The line often sits very close to the top of the chart and appears almost flat, even though there are small but relevant differences in the data. This makes the chart hard to read and interpret.

Does anyone have experience with better alternatives or tips for creating more visually balanced and responsive line charts within (or alongside) Adalo? This could include external tools, custom components, or different approaches.

Any advice or examples would be greatly appreciated. Thanks in advance!

2

Hey @Roelt, you can check the (Animated Bar Chart) component in the Marketplace, it has good animated charts that are visually appealing. Here’s a preview link if you’d like to test it: Demo - Animated Bar Chart

3

Hey @Ali-Bazzi, can you also recommend visually appealing line graphs?
I am currently looking at the line graph in the marketplace.

Do you know whether the left (vertical) axis automatically rescales when the values are much closer together?
For example, if the data points change from 80 to 82 to 85.

Do you have experience working with this type of graph?

4

Hey @Roelt, for line chart, I recommend using this component from the Marketplace: (Animated Line Chart). Here’s a preview link for it: Demo - Animated Line Chart

1 Like
5

Hey @Ali-Bazzi , I puchased the animated line chart, but I am still not very satisfied. It’s not possible to use it as a list.

I wanted to show a chart where my customers can see their bodyweight which they measure daily. However I don’t find it very easy to show this data with this line graph.

Do you have any tips? And how do I use these points adequately in my case?

image
image912×787 95 KB

6

Hey @Roelt,

Thanks for sending the screenshot. This component is the only component other than the native one that offers this solution with parameters. The other way is connecting to an API and using webview to display the chart, but it’s more complex for sure.

Here are some tips for you to be able to do the setup properly:

  • It’s recommended not to have the chart inside a list, it’d be better if you do a workaround, so you can get the data to the chart without having it inside a list unless it’s the only way.

  • X-Axis: Current time => Date through (Magic text)

  • Y-Axis: Current time => BodyWeight through (Magic text)

  • Curve style: Normal

  • Number of Points: (depends on data range)

  • Line Color: Your brand color

    The vertical axis should auto-rescale when values are close. Test it and let me know.

7

FYI : If you select an option instead of manual data, then you will be able to connect the collection for dynamic data.

image
image324×394 14.2 KB

Thank you and have a great day!

8

Thank you @Dilon ,

I used the multi line and set it to 1 line.
The only issue I have is that it doesn’t show the dates very nicely.

Do you have a solution for this issue?

Thank you for the tips!

image
image568×453 26.3 KB

9

Hi @Ali-Bazzi ,

Thank for the advice. I used the multiline function which allows me to have dynamic data. :slight_smile:

10

You’re welcome @Roelt, glad you got dynamic data working.

For better looking dates on the X-axis (as “Jan 15” instead of messy labels):

  • In chart settings: Set X-axis label (Magic text) format to show: Month name (short) & Day number.

  • Reduce Number of Points to 5-7 to avoid the messy look of the chart.

  • Try rotating the labels (if possible) in case they were crowded.

If dates still look off, tag me, happy to check your chart settings.

11

Thank. you!

1 Like
12

You’re welcome!

13

Hey, one last question regarding this topic. Do you have any tips regarding the text of the graph.
The text on the y-axis is pretty large.

image
image506×474 24.5 KB

14

Sure, here are some tips for it:

  • Try reducing label sizing.
  • If label size cannot be reduced more, try shortening it by changing the format of the number to be abbreviated.
  • Increase chart height, it gives more room, and the text auto-scales down.
  • Reduce the number of points in Y-Axis, this way you can control the spacing between points in the Y-Axis.
1 Like