Back to Dictionary

Data & Content Visualization

●●○Customize

Use sparingly

Line Chart Draw

Use Line Chart Draw when trend shape is the story; use Number Ticker when the final number is the story.

Use

Introducing one important trend without making the whole chart feel delayed.

Avoid

Avoid it for rapid monitoring screens or repeated chart refreshes.

Safer Alternative

Number Ticker / Counting Animation

Risk Level

High attention

Timing

700-1200ms for first reveal; under 500ms for small sparklines.

Easing

Ease-out so the line starts decisively and settles at the final point.

Risk

feels slowaccessibility sensitive

Live Demo

Revenue

$42.8k

+18%

What It Is

A chart line that draws along its path to reveal trend direction and make the data feel progressively discovered.

Decision Guidance

Use Line Chart Draw when trend shape is the story; use Number Ticker when the final number is the story.

Best For

Introducing one important trend without making the whole chart feel delayed.

Avoid When

Avoid it for rapid monitoring screens or repeated chart refreshes.

Timing

700-1200ms for first reveal; under 500ms for small sparklines.

Easing

Ease-out so the line starts decisively and settles at the final point.

Risk Tags

feels slowaccessibility sensitive

Alternatives

Number Ticker / Counting Animation Chart Bar Growth Data Tweening

✓When to Use

Analytics cards where the trend matters more than each exact point
First reveal of a dashboard section
Reports where a single metric trajectory needs emphasis

✕When NOT to Use

Live charts that update every second
Dense dashboards where many charts would animate at once
Charts where exact values must be inspected immediately

Configuration Tips

01Use SVG pathLength or stroke-dashoffset instead of animating layout
02Keep axes and labels static while the line draws
03Avoid repeating the draw after the user has already seen the data

You've Seen It In

Stripe DashboardAmplitudeLinear Insights

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create an analytics card where the line chart path draws from left to right on first reveal while axes and labels stay visible.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function LineChartDraw({ active = true }: { active?: boolean }) {
  return (
    <figure className="rounded-2xl border border-stone-200 bg-white p-5">
      <figcaption className="mb-4 flex items-center justify-between text-sm">
        <span className="font-medium text-stone-800">Activation trend</span>
        <span className="font-mono text-xs text-emerald-600">+18%</span>
      </figcaption>
      <svg viewBox="0 0 260 110" className="w-full text-amber-500" aria-label="Activation trend line chart">
        <path d="M4 88 C42 72,54 50,86 60 C120 70,134 22,166 34 C204 48,218 18,256 24" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" pathLength={1} className={active ? '[stroke-dasharray:1] [stroke-dashoffset:0] transition-[stroke-dashoffset] duration-700 ease-out' : '[stroke-dasharray:1] [stroke-dashoffset:1]'} />
      </svg>
    </figure>
  );
}

Related Effects

Number Ticker / Counting Animation

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.

Chart Bar Growth

Bar charts that animate from a height of zero up to their final data value upon entering the screen, making the data feel impactful.

Data Tweening

When filtering or changing datasets, SVG lines or pie slices seamlessly morph from one shape to the next instead of snapping instantly.