Line vs area Two ways to show a value over time.
Short answer
Use a line when the direction matters: a rate, a latency, a price you watch move. Use an area when the amount matters too: a balance, a volume, a total you want to feel.
Updated Nov 2, 2026 · Fintech sample data
010 · Line The direction: from $184.7K to $212.4K, with a low of $184.7K.
011 · Area The same 30 days with the amount under the line.
Same 30 days
The line makes every turn easy to follow. The area makes the size of the balance felt: it never drops below $184.7K, so the dips look as small as they are.
If you ask
Common mistakes Line Several lines in one colour. Give each series its own colour, or use a multi-line chart.
Joining across gaps. A missing day should show as a gap, not a straight run.
Area Stacking solid fills. Areas behind are hidden. Use see-through fills.
An area for a rate. A fill reads as an amount; a rate reads better as a line.
Other ways to show it Latency by region P95 time to first token per hour over the last 24 hours, 4 regions; now: US-East 360 ms, EU-West 394 ms, AP-South 594 ms, SA-East 518 ms. 900 600 300 0 00:00 06:00 12:00 18:00 NOW US-EAST EU-WEST AP-SOUTH SA-EAST Latency by region P95 time to first token per hour over the last 24 hours, 4 regions; now: US-East 360 ms, EU-West 394 ms, AP-South 594 ms, SA-East 518 ms. 900 600 300 0 AP-South 594 SA-East 518 EU-West 394 US-East 360 00:00 12:00 Now US-East EU-West AP-South SA-East Latency by region Hour US-East (ms) EU-West (ms) AP-South (ms) SA-East (ms) 00:00 352 297 663 515 01:00 368 326 699 493 02:00 358 341 658 479 03:00 362 326 685 479 04:00 337 315 696 506 05:00 362 340 713 469 06:00 343 352 718 495 07:00 365 332 724 533 08:00 390 344 726 508 09:00 419 330 705 530 10:00 430 338 697 540 11:00 396 346 657 526 12:00 391 370 625 517 13:00 369 394 653 552 14:00 354 420 639 516 15:00 326 403 655 539 16:00 323 420 647 513 17:00 303 394 670 533 18:00 317 379 662 506 19:00 349 380 638 497 20:00 359 364 618 516 21:00 345 393 583 484 22:00 370 403 575 521 23:00 360 394 594 518
Latency by region P95 time to first token per hour over the last 24 hours, 4 regions; now: US-East 360 ms, EU-West 394 ms, AP-South 594 ms, SA-East 518 ms. 900 600 300 0 00:00 06:00 12:00 18:00 NOW US-EAST EU-WEST AP-SOUTH SA-EAST Latency by region P95 time to first token per hour over the last 24 hours, 4 regions; now: US-East 360 ms, EU-West 394 ms, AP-South 594 ms, SA-East 518 ms. 900 600 300 0 AP-South 594 SA-East 518 EU-West 394 US-East 360 00:00 12:00 Now US-East EU-West AP-South SA-East Latency by region Hour US-East (ms) EU-West (ms) AP-South (ms) SA-East (ms) 00:00 352 297 663 515 01:00 368 326 699 493 02:00 358 341 658 479 03:00 362 326 685 479 04:00 337 315 696 506 05:00 362 340 713 469 06:00 343 352 718 495 07:00 365 332 724 533 08:00 390 344 726 508 09:00 419 330 705 530 10:00 430 338 697 540 11:00 396 346 657 526 12:00 391 370 625 517 13:00 369 394 653 552 14:00 354 420 639 516 15:00 326 403 655 539 16:00 323 420 647 513 17:00 303 394 670 533 18:00 317 379 662 506 19:00 349 380 638 497 20:00 359 364 618 516 21:00 345 393 583 484 22:00 370 403 575 521 23:00 360 394 594 518
Volume by venue Daily spot volume per venue in $M, Sep 10 to Oct 9; on Oct 9: Northgate $455M, Tidepool $326M, Ardent DEX $108M. 600M 400M 200M 0 SEP 10 SEP 20 SEP 30 OCT 9 NORTHGATE TIDEPOOL ARDENT DEX Volume by venue Daily spot volume per venue in $M, Sep 10 to Oct 9; on Oct 9: Northgate $455M, Tidepool $326M, Ardent DEX $108M. 600M 400M 200M 0 Northgate 455M Tidepool 326M Ardent DEX 108M Sep 10 Sep 20 Sep 30 Oct 9 Northgate Tidepool Ardent DEX Volume by venue Day Northgate ($M) Tidepool ($M) Ardent DEX ($M) Sep 10 384 273 118 Sep 11 404 250 137 Sep 12 392 264 128 Sep 13 397 248 138 Sep 14 365 257 133 Sep 15 396 266 148 Sep 16 372 295 143 Sep 17 400 322 127 Sep 18 432 353 114 Sep 19 470 333 91 Sep 20 485 356 85 Sep 21 441 326 98 Sep 22 434 309 94 Sep 23 406 310 77 Sep 24 387 291 67 Sep 25 350 325 67 Sep 26 347 336 87 Sep 27 321 326 60 Sep 28 339 344 80 Sep 29 380 372 108 Sep 30 393 339 89 Oct 1 375 360 106 Oct 2 407 369 114 Oct 3 395 380 103 Oct 4 390 380 96 Oct 5 434 380 122 Oct 6 456 380 95 Oct 7 433 364 112 Oct 8 417 357 93 Oct 9 455 326 108
Volume by venue Daily spot volume per venue in $M, Sep 10 to Oct 9; on Oct 9: Northgate $455M, Tidepool $326M, Ardent DEX $108M. 600M 400M 200M 0 SEP 10 SEP 20 SEP 30 OCT 9 NORTHGATE TIDEPOOL ARDENT DEX Volume by venue Daily spot volume per venue in $M, Sep 10 to Oct 9; on Oct 9: Northgate $455M, Tidepool $326M, Ardent DEX $108M. 600M 400M 200M 0 Northgate 455M Tidepool 326M Ardent DEX 108M Sep 10 Oct 9 Northgate Tidepool Ardent DEX Volume by venue Day Northgate ($M) Tidepool ($M) Ardent DEX ($M) Sep 10 384 273 118 Sep 11 404 250 137 Sep 12 392 264 128 Sep 13 397 248 138 Sep 14 365 257 133 Sep 15 396 266 148 Sep 16 372 295 143 Sep 17 400 322 127 Sep 18 432 353 114 Sep 19 470 333 91 Sep 20 485 356 85 Sep 21 441 326 98 Sep 22 434 309 94 Sep 23 406 310 77 Sep 24 387 291 67 Sep 25 350 325 67 Sep 26 347 336 87 Sep 27 321 326 60 Sep 28 339 344 80 Sep 29 380 372 108 Sep 30 393 339 89 Oct 1 375 360 106 Oct 2 407 369 114 Oct 3 395 380 103 Oct 4 390 380 96 Oct 5 434 380 122 Oct 6 456 380 95 Oct 7 433 364 112 Oct 8 417 357 93 Oct 9 455 326 108
Cash balance forecast Cash balance from May to October (actual, $2.41M today) and forecast to April: $2.66M, with a p10–p90 band of $2.24M to $3.08M. 3.2M 2.7M 2.3M 1.8M MAY OCT APR ACTUAL FORECAST Cash balance forecast Cash balance from May to October (actual, $2.41M today) and forecast to April: $2.66M, with a p10–p90 band of $2.24M to $3.08M. 3.2M 2.7M 2.3M 1.8M May Oct Apr Actual Forecast Cash balance forecast Month Balance P10 P90 Kind May $2.10M $2.08M $2.12M Actual Jun $2.20M $2.18M $2.22M Actual Jul $2.15M $2.13M $2.17M Actual Aug $2.30M $2.28M $2.32M Actual Sep $2.35M $2.33M $2.37M Actual Oct $2.41M $2.39M $2.43M Actual Nov $2.46M $2.39M $2.53M Forecast Dec $2.50M $2.36M $2.64M Forecast Jan $2.52M $2.31M $2.73M Forecast Feb $2.58M $2.30M $2.86M Forecast Mar $2.60M $2.25M $2.95M Forecast Apr $2.66M $2.24M $3.08M Forecast
Cash balance forecast Cash balance from May to October (actual, $2.41M today) and forecast to April: $2.66M, with a p10–p90 band of $2.24M to $3.08M. 3.2M 2.7M 2.3M 1.8M MAY OCT APR ACTUAL FORECAST Cash balance forecast Cash balance from May to October (actual, $2.41M today) and forecast to April: $2.66M, with a p10–p90 band of $2.24M to $3.08M. 3.2M 2.7M 2.3M 1.8M May Oct Apr Actual Forecast Cash balance forecast Month Balance P10 P90 Kind May $2.10M $2.08M $2.12M Actual Jun $2.20M $2.18M $2.22M Actual Jul $2.15M $2.13M $2.17M Actual Aug $2.30M $2.28M $2.32M Actual Sep $2.35M $2.33M $2.37M Actual Oct $2.41M $2.39M $2.43M Actual Nov $2.46M $2.39M $2.53M Forecast Dec $2.50M $2.36M $2.64M Forecast Jan $2.52M $2.31M $2.73M Forecast Feb $2.58M $2.30M $2.86M Forecast Mar $2.60M $2.25M $2.95M Forecast Apr $2.66M $2.24M $3.08M Forecast
Questions Can an area start above zero? For prices it can fit the range, as long as the axis says where it starts. For amounts, start at zero.
Which reads better at small sizes? Both stay readable from XS to L; the line uses less ink on a busy card.
Do both come in every size? Yes. Line and Area come in XS, S, M and L, each laid out again for its size, in light and dark.
Do they install the same way? Yes, one command each: npx shadcn add @chartory/line and npx shadcn add @chartory/area.