Dashboard Cards Chart
A combined stat card row and interactive multi-line chart for dashboards and analytics screens. Each card shows a label and a key metric, and has a Show/Hide toggle button that controls whether its corresponding line appears on the chart below. Perfect for sales dashboards, fitness trackers, project analytics, or any screen where users need to compare multiple data series at a glance.
Getting Started
Add the component to a screen and connect two Adalo collections -- one for the stat cards (label + metric value), and one for the chart data (one row per x-axis point, with a numeric Y-value column for each card). Set Number of Cards to Show to match how many cards you have in your collection, then map the chart's Y-Value fields to the matching numeric columns. The chart renders immediately with animated lines and dots.
Settings
Number of Cards to Show
How many stat cards to display, and how many lines to draw on the chart. Accepts 2, 3, or 4. (default: 3)
Button Position
Where the Show/Hide toggle button appears on each card -- Top of Card places it above the label and value, Bottom of Card places it below. (default: Top of Card)
Show Button Label
Text shown on the toggle when a line is currently hidden. (default: Show)
Hide Button Label
Text shown on the toggle when a line is currently visible. (default: Hide)
Card Background Color
Background fill for each stat card. (default: dark navy rgba(30,30,50,0.85))
Card Corner Radius
Rounded corner radius for each card, from 0 (square) to 30 (pill). (default: 10)
Button Background Color
Fill color of the Show/Hide button. (default: gold #C8B96E)
Button Text Color
Text color inside the Show/Hide button. (default: dark #1A1A2E)
Button Font Size
Font size for the button label, from 8 to 24. (default: 13)
Button Corner Radius
Rounded corner radius for the button, from 0 to 30. (default: 16)
Card Text Line 1 Color
Color of the top text line (the label/category) on each card. (default: muted #AAAACC)
Card Text Line 1 Size
Font size for the label line, from 8 to 24. (default: 12)
Card Text Line 2 Color
Color of the bottom text line (the metric value) on each card. (default: white #FFFFFF)
Card Text Line 2 Size
Font size for the metric value line, from 8 to 36. (default: 20)
Card Text Line 2 Weight
Font weight for the metric value -- Normal or Bold. (default: Bold)
β CARDS β Connect List
The Adalo collection that drives the stat cards. Each record becomes one card. Connect this to a collection that has at least one field for the display label and one for the metric value.
Card: Display Text
The field from the Cards list to show as the card label -- the smaller top line. (default: Display Text)
Card: Value / Sum
The field from the Cards list to show as the metric value -- the larger bottom line. (default: Sum)
β CHART β Connect List
The Adalo collection that drives the chart. Each record becomes one point on the x-axis. Connect this to a collection with an x-axis label field and up to four numeric Y-value fields.
Chart: X-Axis Label
The field from the Chart list to use as the x-axis label (e.g. month name, date, category). (default: Jan)
Card 1: Y-Value
The numeric field from the Chart list to use as the Y-value for Card 1's line. (default: 50)
Card 2: Y-Value
The numeric field from the Chart list to use as the Y-value for Card 2's line. (default: 80)
Card 3: Y-Value
The numeric field from the Chart list to use as the Y-value for Card 3's line. (default: 30)
Card 4: Y-Value
The numeric field from the Chart list to use as the Y-value for Card 4's line. (default: 65)
Line 1β4 Color
Individual stroke color for each chart line, matching the accent on the corresponding card. (defaults: blue, orange-red, teal, amber)
Line Style
Curved uses a smooth catmull-rom spline between points; Straight draws direct line segments. (default: Curved)
Line Thickness
Stroke width for the chart lines, from 1 to 10 pixels. (default: 3)
Show Data Values on Chart
When on, each data point displays its numeric value as a label above the dot. (default: on)
Data Label Color
Color of the data value labels. (default: white)
Data Label Font Size
Font size of the data value labels, from 8 to 18. (default: 11)
Show Dots on Lines
When on, filled circles are drawn at each data point. (default: on)
Dot Size
Radius of each dot, from 1 to 10 pixels. (default: 4)
Chart Background Color
Fill behind the chart area. Use transparent to let the screen background show through. (default: transparent)
Axis Label Color
Color of the x-axis and y-axis tick labels. (default: #888888)
Axis Label Font Size
Font size for axis labels, from 8 to 18. (default: 11)
Show Grid Lines
When on, horizontal and vertical grid lines appear behind the chart. (default: off)
Grid Line Color
Color of the grid lines when enabled. (default: #333355)
Y-Axis Range
Controls how the y-axis minimum and maximum are calculated:
Auto -- automatically fits the data range with a small headroom margin.
Start at Zero -- always starts the y-axis at 0, useful when comparing series against a zero baseline.
Manual -- you set the minimum and maximum explicitly.
(default: Auto)
Y-Axis Minimum
The lowest value on the y-axis. Only active when Y-Axis Range is set to Manual. (default: 0)
Y-Axis Maximum
The highest value on the y-axis. Only active when Y-Axis Range is set to Manual. (default: 400)
Animate Chart on Load
When on, lines draw in with an 800ms animation when the component first renders. (default: on)
Tips & Best Practices
Use No Formatting for date Magic Text when binding the X-Axis Label to a date field -- Adalo's default date format includes commas and spaces that create cluttered axis labels. A short format like "Jan" or "1/5" works best.
Keep your chart collection deduplicated by x-label. If your database has multiple records per time period (e.g. one record per category per month), the component deduplicates by x-label automatically -- but it's cleaner to structure your data so each row is one unique point.
Match Number of Cards to Show to your actual collection size. If you have 3 cards in the collection but set this to 4, the 4th line will have no data and won't appear, which is fine -- but set it to 3 for a cleaner result.
The Chart list and Cards list are independent. They don't need to be the same collection. This lets you have a "metrics summary" collection for the cards (showing computed totals or aggregates) and a separate "time series" collection for the chart.
Start at Zero is best for comparisons. When you want users to compare absolute values across lines, use Start at Zero so the y-axis baseline is consistent. Use Auto when differences between high and low values matter more than the absolute scale.
Use Manual Y-Axis Range for fixed scales. If your data represents percentages (0--100) or star ratings (1--5), set Y-Axis Range to Manual and specify the expected bounds so the chart doesn't rescale when data changes.
Toggle visibility persists within the session. The Show/Hide state is local component state -- it resets if the user navigates away and returns. Use this intentionally for "focus mode" UX patterns.
Dark-themed cards pair well with dark screens. The default card background is semi-transparent dark navy, which looks great over a dark screen background. For light themes, change Card Background Color to white or a light grey.
Example Use Cases
Sales dashboard -- Connect a "Monthly Metrics" collection with Revenue, Orders, New Customers, and Avg Order Value fields. Each becomes a card with a matching chart line. Managers can hide lines to focus on the metric they care about right now.
Fitness app analytics -- Show Steps, Calories, Active Minutes, and Distance over the past 7 days. Each card displays the weekly total while the chart shows the daily trend. Users toggle lines to avoid clutter when tracking one metric at a time.
Project management overview -- Display Tasks Completed, Tasks Created, Bugs Filed, and PRs Merged by week. Product leads can hide/show series to spot correlations between delivery pace and bug rates.
E-commerce performance -- Bind to a collection with daily sales data. Cards show month-to-date totals; chart shows the daily breakdown. The Show/Hide buttons let users compare channels (organic vs paid vs referral) side by side.
Financial reporting -- Use Manual Y-Axis Range to fix the scale across report periods, so charts are visually comparable month-over-month without the axis auto-scaling to different ranges.
Was this helpful?