Dot.SYSTEM

Charts

Visual containers for data trends and analytics, built with Recharts and styled for the Dot system.

Usage

Charts are used to visualize data trends over time. Use a Line Chart when you want to show how a metric (like views or revenue) changes continuously across a period.

Content

Line Visualization

A standard line chart showing daily profile views.

Profile Views Over Time
Daily views for the selected period.

Spec

  • Line Color: Brand Primary (#D74D0F) by default.
  • Grid Lines: Horizontal only, 3 3 dash array, #E5E5E5 color.
  • Typography: 12px for axis labels, #4D4D4D color.
  • Tooltip: Rounded-md (8px), no border, elevation styling.
  • Monotonic: Smooth curve interpolation for lines.

Anatomy

Chart header/title
DATA PLOT AREA
X-AXIS (TIME)INDEX LABELS