Line Chart
AI Pass+chart#interactive#tooltip#visualization
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Chart component
About Line Chart
A standalone interactive SVG line chart showing a twelve-month revenue trend — generated at runtime with a crosshair hover, area fill under the line, a floating tooltip, click-to-pin data points, a legend, and a period selector. Fully token-driven.
Features
- Runtime-generated SVG line with an area fill under the curve (primary color at 14% opacity)
- Crosshair hover: a vertical dashed guide follows the mouse and snaps to the nearest data point
- Nearest data-point dot enlarges and glows on hover, with a floating tooltip showing month and value
- Click a data point to pin its tooltip; click again to unpin
- Horizontal gridlines with Y-axis value labels and sampled X-axis month labels
- Period selector control and a legend built at runtime
- Fade-up entrance animation
- Visually-hidden data table mirrors the chart for screen readers
- Reduced-motion support shows the final chart state instantly
Accessibility
- Chart region
.cht-chartusesrole="img"with a descriptivearia-label- Period selector
- Keyboard-operable listbox with
aria-label - Data table
- Visually-hidden
<table>mirrors the chart data for screen readers - Focus indicators
:focus-visibleoutline using the--ringtoken- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Line Chart in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the chart is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Bar Chart
VanillaReact
A Cadence Steps activity card — slim raspberry range bars with marker dots, segmented Day/Week/Month tabs with a springing slider, an animated min–max readout, a dashed average line, a compact value axis, hover tooltips, a context menu, and a skeleton loading state — fully token-driven.
#chart#interactive#tooltip
Donut Chart
VanillaReact
An interactive SVG donut chart that pulls Weekly Activity data through a swappable async seam, then renders a stroke-arc ring with constant-width separators, a center total, a count-up share KPI with trend delta, a dotted-leader legend, and a hidden data table.
#chart#visualization
Training Status Popover
VanillaReact
A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.
#popover#progress#ai
Login — Proxima
VanillaReact
A cosmic split-screen login with Proxima Centauri orbital visualization, social sign-in (Google, Apple, Passkey), real-time email and password validation, animated star-field background, and a full HUD status bar — fully token-driven and design-system agnostic.
#login#form#validation
Bento Grid
ReactVanilla
A responsive bento grid layout with asymmetric skeleton cells, dark/light theme toggle, and full design-system token integration — mobile-first and design-system agnostic.
#layout#bento#grid
Segmented Progress
VanillaReact
A techy HUD segmented progress meter — discrete cells that fill toward a target across a vibrant cool-to-hot color ramp, with a monospace step count, a tick scale, and a per-cell glow. Token-driven and design-system agnostic.
#progress#progress-bar#segmented
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
