Line chart
Follow changes over time without a filled area.
Usage
Use a Line for each numeric series. Sort dates before passing data; lines connect points in the supplied order.
String categories have equal spacing. Date and numeric categories preserve their distance. A null or missing measurement breaks the line instead of turning into zero.
Compare trends
Replay preview Full screen Code
Revenue Target
| month | Revenue | Target |
|---|---|---|
| Jan | 186 | 160 |
| Feb | 242 | 190 |
| Mar | 218 | 220 |
| Apr | 304 | 250 |
| May | 286 | 280 |
| Jun | 372 | 310 |
Missing measurements
Replay preview Full screen Code
Latency
| day | Latency |
|---|---|
| Mon | 42 ms |
| Tue | 58 ms |
| Wed | No data |
| Thu | 47 ms |
| Fri | 39 ms |
| Sat | 45 ms |
Irregular dates
Replay preview Full screen Code
Visitors
| date | Visitors |
|---|---|
| Apr 1 | 120 |
| Apr 3 | 180 |
| Apr 10 | 150 |
| Apr 12 | 230 |
Continuous motion
Replay preview Full screen Code
Revenue Target
| month | Revenue | Target |
|---|---|---|
| Jan | 186 | 160 |
| Feb | 242 | 190 |
| Mar | 218 | 220 |
| Apr | 304 | 250 |
| May | 286 | 280 |
| Jun | 372 | 310 |
Data and animation states
Full screen Code
Orders
| month | Orders |
|---|---|
| April | 48 |
| May | 72 |
| June | 61 |
API reference
See the shared API reference for every part and prop.