> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/dashboard-cards-chart.md). # 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/dashboard-cards-chart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.