Line Chart
Heavy — ~15KBAn animated line chart that draws itself from left to right as the reader scrolls to it. Perfect for showing trends over time — the line traces out the data as if being drawn by hand.
Monthly river flow
A line chart showing seasonal river flow patterns. Scroll down to watch the line draw itself.
Custom line colour
The same river flow data with a warm accent colour instead of the default primary.
Sparse data (4 points)
Quarterly aggregated data with only 4 points — the line still draws smoothly but shows broader trends rather than detail.
When to use
- Trends over time — monthly rainfall, annual temperatures, population growth
- Comparing a single metric across a time period
- When the shape of the data matters — peaks, valleys, and turning points tell a story
When NOT to use
- Comparing categories — use a Bar Chart instead
- Showing proportions of a whole — use a Doughnut chart
- If the data has fewer than 4 points — a simple number or CounterWall is clearer
Configuration
- Data: an array of data points, each with a value for the x-axis (usually time) and y-axis (the measurement)
- X field: which property in your data represents the horizontal axis (e.g., 'month')
- Y field: which property represents the vertical axis (e.g., 'flow')
- Colour: the colour of the line — defaults to your story's primary colour
- Tooltip: hover over any point to see its exact value
Limitations
- One line per chart — for multiple lines, you'd need multiple charts or a custom solution
- The draw animation plays once when scrolled into view
- Very dense data (hundreds of points) may look cluttered — consider aggregating