Dashboard UI Guide

Line Chart

Shows change across an ordered sequence, most often time.

What question it answers

How is this measure changing across an ordered period?

Where to use it

Trend cards, analytics overviews, and monitoring pages where change over time is the main question.

When to use it

Use it for ordered values—especially time—when direction, rate of change and turning points matter.

When not to use it

Avoid connecting unrelated categories because the connecting line implies continuity that does not exist.

Responsive design

Keep the full time series, reduce x-axis label density, and move secondary legends or controls below the plot instead of dropping data points.

Arabic and RTL

Do not reverse chronological data automatically. Arabic chrome can be RTL while the time sequence remains in its established analytical order.

Anatomy

Chart context
States the measure and the period (for example monthly revenue, Jan–Jun), so the slope is read against the right time span.
Line series
The connected line shows direction, rate of change and turning points. Markers on the points help when there are few observations.
Time axis
Orders the points in time. Equal spacing means equal time steps; time keeps its left-to-right order in charts.
Value axis
Sets the vertical scale. Unlike bars, a line chart may start above zero when the change, not the total, is the story.

Accessibility

  • Provide the trend and important values outside hover-only interaction; focused points should expose series, period and value.

All lessons

  1. Bar Chart — Compares values across categories using length on a common scale.
  2. Line Chart — Shows change across an ordered sequence, most often time.
  3. Area Chart — Emphasizes magnitude over an ordered sequence by filling the area under a line.
  4. Pie / Donut Chart — Shows a small number of parts that make up one meaningful whole.
  5. Scatter Plot — Reveals relationships, clusters and outliers between two numeric variables.
  6. Histogram — Shows the distribution of a numeric variable across value ranges.
  7. Box Plot — Summarizes distribution, median, spread and potential outliers compactly.
  8. Heatmap — Uses color intensity across a matrix to reveal patterns and concentration.
  9. Treemap — Shows hierarchical part-to-whole relationships through nested rectangles.
  10. Funnel Chart — Shows how a population changes through ordered stages of a process.
  11. Waterfall Chart — Explains how positive and negative contributions produce a final total.
  12. Sparkline — Shows a compact trend without the full framing of a standard chart.
  13. Gauge — Shows one value within a bounded range when position against a threshold matters.
  14. Combo Chart — Combines compatible visual marks when two related measures need coordinated comparison.
  15. Geographic Data Map — Maps values to locations or regions when geography is part of the question.
  16. KPI / Stat Card — Presents one important metric with enough context to judge its current value and change.
  17. Data Table — Presents structured records in rows and columns, with table-level search, filtering, sorting, selection and pagination treated as parts of the whole component.
  18. Dashboard Card / Panel — Groups one coherent dashboard task, metric or visualization into a bounded region with clear hierarchy.
  19. Filter Bar — Places the most important scope controls close to the data they affect.
  20. Filter Panel — Collects a larger set of filtering controls in a dedicated surface.
  21. Date Picker / Date Range Picker — Lets users choose one date or a bounded time range for reports, filters and analytics.
  22. Sidebar Navigation — Provides persistent access to major dashboard destinations and groups.
  23. Top App Bar — Holds page identity, global actions and high-priority controls at the top of an application.
  24. Breadcrumbs — Shows hierarchy and provides a path back through nested dashboard levels.
  25. Tabs — Switches between peer views inside the same dashboard context.
  26. Alert / Banner — Communicates important contextual or page-wide information that should remain visible until understood or resolved.
  27. Toast — Confirms a brief asynchronous outcome without blocking the current task.
  28. Notification Center — Collects system and workflow updates that users may need to revisit.
  29. Dropdown / Overflow Menu — Moves lower-priority or contextual actions into an on-demand menu.
  30. Modal / Dialog — Creates a focused temporary task that may block interaction with the underlying dashboard.
  31. Drawer / Side Panel — Opens contextual controls or details from an edge while preserving the page behind it.