Chart style

Applies to every chart.

Palette

Theme

Appearance

Depth
Surface
Background

Reading & motion

Axis
Hover
Legend
Numbers
Loading
Empty
Using chart defaults
3,109npm
1stars

Charts

Every chart, by the job it does

Trends3

  • Area
  • Line
  • Combo

Comparison4

  • Bar
  • Horizontal bar
  • Slope
  • RangeNew

Part of a whole4

  • Radial
  • Treemap
  • Funnel
  • Sankey

KPIs3

  • Stat cards
  • Progress
  • Activity ring

Patterns4

  • Heatmap
  • Scatter
  • Radar
  • Box plotNew

Cool23

  • Chord loomNew
  • Rank ribbonsNew
  • Event helixNew
  • Contour islandsNew
  • Parallel ribbonsNew
  • Sunburst terracesNew
  • Cluster constellationNew
  • Ternary prismNew
  • Wind roseNew
  • Marimekko blocksNew
  • Intersection towersNew
  • Horizon foldsNew
  • Circle archipelagoNew
  • Helix ribbonsNew
  • Voxel cloudNew
  • Arc bridgesNew
  • TerrainNew
  • Hex cityNew
  • Voxel waffleNew
  • SkylineNew
  • Block cityNew
  • RidgelineNew
  • Spiral yearNew

Finance6

  • CandlestickNew
  • IndicatorsNew
  • PriceNew
  • DepthNew
  • Order bookNew
  • PortfolioNew

Spiral year

Daily steps

8,2738,273
JanFebMarAprMayJunJulAugSepOctNovDec
One turn per year, January at the top · Longer and darker: more
Daily steps
ObservationValue
2024-01-014,000
2024-01-024,719
2024-01-035,439
2024-01-046,160
2024-01-054,482
2024-01-068,204
2024-01-075,927
2024-01-084,251
2024-01-094,976
2024-01-105,701
2024-01-116,427
2024-01-124,754
2024-01-138,481
2024-01-146,209
2024-01-154,538
2024-01-165,268
2024-01-175,998
2024-01-184,329
2024-01-195,061
2024-01-208,793
2024-01-216,527
2024-01-224,860
2024-01-235,595
2024-01-246,330
2024-01-254,666
2024-01-265,403
2024-01-279,140
2024-01-284,478
2024-01-295,216
2024-01-305,956
2024-01-316,696
2024-02-015,036
2024-02-025,777
2024-02-039,519
2024-02-044,862
2024-02-055,605
2024-02-066,348
2024-02-074,693
2024-02-085,437
2024-02-096,183
2024-02-109,929
2024-02-115,275
2024-02-126,023
2024-02-136,770
2024-02-145,119
2024-02-155,867
2024-02-166,617
2024-02-177,967
2024-02-185,717
2024-02-196,468
2024-02-207,219
2024-02-215,571
2024-02-226,323
2024-02-237,076
2024-02-248,429
2024-02-256,183
2024-02-266,937
2024-02-275,292
2024-02-286,046
2024-02-296,802
2024-03-017,558
2024-03-028,914
2024-03-036,670
2024-03-047,427
2024-03-055,784
2024-03-066,542
2024-03-077,299
2024-03-085,658
2024-03-099,416
2024-03-107,175
2024-03-117,934
2024-03-126,293
2024-03-137,053
2024-03-147,812
2024-03-156,172
2024-03-169,933
2024-03-177,693
2024-03-186,054
2024-03-196,814
2024-03-207,575
2024-03-218,337
2024-03-226,698
2024-03-2310,459
2024-03-248,221
2024-03-256,582
2024-03-267,344
2024-03-278,106
2024-03-286,468
2024-03-297,230
2024-03-3010,992
2024-03-318,754
2024-04-017,116
2024-04-027,878
2024-04-038,640
2024-04-047,002
2024-04-057,763
2024-04-0611,525
2024-04-076,887
2024-04-087,649
2024-04-098,411
2024-04-109,172
2024-04-117,534
2024-04-128,295
2024-04-1312,056
2024-04-147,417
2024-04-158,178
2024-04-168,939
2024-04-177,299
2024-04-188,060
2024-04-198,820
2024-04-2012,580
2024-04-217,940
2024-04-228,699
2024-04-239,458
2024-04-247,817
2024-04-258,576
2024-04-269,334
2024-04-2710,692
2024-04-288,450
2024-04-299,207
2024-04-309,964
2024-05-018,321
2024-05-029,077
2024-05-039,833
2024-05-0411,189
2024-05-058,944
2024-05-069,699
2024-05-078,053
2024-05-088,807
2024-05-099,561
2024-05-1010,314
2024-05-1111,666
2024-05-129,418
2024-05-1310,170
2024-05-148,521
2024-05-159,272
2024-05-1610,022
2024-05-178,372
2024-05-1812,121
2024-05-199,869
2024-05-2010,618
2024-05-218,965
2024-05-229,712
2024-05-2310,458
2024-05-248,804
2024-05-2512,549
2024-05-2610,294
2024-05-278,638
2024-05-289,381
2024-05-2910,124
2024-05-3010,867
2024-05-319,208
2024-06-0112,949
2024-06-0210,689
2024-06-039,029
2024-06-049,768
2024-06-0510,506
2024-06-068,844
2024-06-079,581
2024-06-0813,317
2024-06-0911,053
2024-06-109,388
2024-06-1110,122
2024-06-1210,856
2024-06-139,189
2024-06-149,921
2024-06-1513,652
2024-06-168,983
2024-06-179,713
2024-06-1810,443
2024-06-1911,171
2024-06-209,499
2024-06-2110,226
2024-06-2213,953
2024-06-239,279
2024-06-2410,004
2024-06-2510,728
2024-06-269,051
2024-06-279,774
2024-06-2810,496
2024-06-2914,217
2024-06-309,538
2024-07-0110,258
2024-07-0210,977
2024-07-039,295
2024-07-0410,013
2024-07-0510,730
2024-07-0612,046
2024-07-079,761
2024-07-0810,476
2024-07-0911,190
2024-07-109,503
2024-07-1110,216
2024-07-1210,927
2024-07-1312,238
2024-07-149,949
2024-07-1510,658
2024-07-168,967
2024-07-179,675
2024-07-1810,382
2024-07-1911,089
2024-07-2012,395
2024-07-2110,100
2024-07-2210,805
2024-07-239,109
2024-07-249,812
2024-07-2510,515
2024-07-268,816
2024-07-2712,518
2024-07-2810,218
2024-07-2910,918
2024-07-309,217
2024-07-319,916
2024-08-0110,613
2024-08-028,911
2024-08-0312,607
2024-08-0410,303
2024-08-058,598
2024-08-069,293
2024-08-079,987
2024-08-0810,681
2024-08-098,974
2024-08-1012,666
2024-08-1110,358
2024-08-128,649
2024-08-139,340
2024-08-1410,030
2024-08-158,319
2024-08-169,008
2024-08-1712,697
2024-08-1810,385
2024-08-198,672
2024-08-209,359
2024-08-2110,046
2024-08-228,332
2024-08-239,017
2024-08-2412,702
2024-08-257,987
2024-08-268,671
2024-08-279,355
2024-08-2810,038
2024-08-298,321
2024-08-309,003
2024-08-3112,686
2024-09-017,967
2024-09-028,649
2024-09-039,330
2024-09-0410,010
2024-09-058,291
2024-09-068,971
2024-09-0712,651
2024-09-087,930
2024-09-098,609
2024-09-109,288
2024-09-117,567
2024-09-128,245
2024-09-138,923
2024-09-1412,601
2024-09-157,879
2024-09-168,556
2024-09-179,234
2024-09-187,511
2024-09-198,188
2024-09-208,865
2024-09-2110,141
2024-09-227,818
2024-09-238,494
2024-09-249,171
2024-09-257,447
2024-09-268,123
2024-09-278,799
2024-09-2810,075
2024-09-297,751
2024-09-308,427
2024-10-016,703
2024-10-027,379
2024-10-038,055
2024-10-048,731
2024-10-0510,007
2024-10-067,684
2024-10-078,360
2024-10-086,636
2024-10-097,312
2024-10-107,989
2024-10-116,265
2024-10-129,942
2024-10-137,619
2024-10-148,296
2024-10-156,573
2024-10-167,250
2024-10-177,928
2024-10-186,206
2024-10-199,884
2024-10-207,562
2024-10-215,840
2024-10-226,519
2024-10-237,198
2024-10-247,877
2024-10-256,156
2024-10-269,836
2024-10-277,516
2024-10-285,797
2024-10-296,477
2024-10-307,159
2024-10-315,440
2024-11-016,122
2024-11-029,804
2024-11-037,487
2024-11-045,770
2024-11-056,453
2024-11-067,137
2024-11-075,421
2024-11-086,106
2024-11-099,791
2024-11-105,076
2024-11-115,762
2024-11-126,449
2024-11-137,136
2024-11-145,423
2024-11-156,111
2024-11-169,800
2024-11-175,089
2024-11-185,779
2024-11-196,469
2024-11-204,759
2024-11-215,451
2024-11-226,143
2024-11-239,835
2024-11-245,128
2024-11-255,822
2024-11-266,516
2024-11-274,811
2024-11-285,506
2024-11-296,202
2024-11-307,499
2024-12-015,196
2024-12-025,894
2024-12-036,592
2024-12-044,892
2024-12-055,592
2024-12-066,292
2024-12-077,593
2024-12-085,295
2024-12-095,998
2024-12-104,301
2024-12-115,005
2024-12-125,710
2024-12-136,415
2024-12-147,721
2024-12-155,428
2024-12-166,136
2024-12-174,444
2024-12-185,153
2024-12-195,862
2024-12-204,173
2024-12-217,884
2024-12-225,596
2024-12-236,308
2024-12-244,621
2024-12-255,335
2024-12-266,050
2024-12-274,366
2024-12-288,082
2024-12-295,799
2024-12-304,117
2024-12-314,835
2025-01-015,554
2025-01-026,274
2025-01-034,595
2025-01-048,316
2025-01-056,038
2025-01-064,361
2025-01-075,085
2025-01-085,809
2025-01-094,134
2025-01-104,860
2025-01-118,587
2025-01-126,314
2025-01-134,642
2025-01-145,371
2025-01-156,100
2025-01-164,430
2025-01-175,161
2025-01-188,893
2025-01-194,225
2025-01-204,958
2025-01-215,692
2025-01-226,426
2025-01-234,761
2025-01-245,497
2025-01-259,233
2025-01-264,570
2025-01-275,308
2025-01-286,046
2025-01-294,386
2025-01-305,125
2025-01-315,866
2025-02-019,607
2025-02-024,948
2025-02-035,691
2025-02-046,434
2025-02-054,777
2025-02-065,521
2025-02-076,266
2025-02-087,611
2025-02-095,357
2025-02-106,104
2025-02-116,851
2025-02-125,198
2025-02-135,946
2025-02-146,695
2025-02-158,044
2025-02-165,794
2025-02-176,544
2025-02-184,895
2025-02-195,646
2025-02-206,398
2025-02-217,150
2025-02-228,503
2025-02-236,256
2025-02-247,009
2025-02-255,363
2025-02-266,118
2025-02-276,872
2025-02-285,228
2025-03-018,983
2025-03-026,739
2025-03-037,496
2025-03-045,852
2025-03-056,610
2025-03-067,367
2025-03-075,725
2025-03-089,483
2025-03-097,241
2025-03-105,600
2025-03-116,359
2025-03-127,118
2025-03-137,877
2025-03-146,237
2025-03-159,997
2025-03-167,757
2025-03-176,118
2025-03-186,878
2025-03-197,639
2025-03-206,000
2025-03-216,761
2025-03-2210,522
2025-03-238,284
2025-03-246,645
2025-03-257,407
2025-03-268,168
2025-03-276,530
2025-03-287,292
2025-03-2911,054
2025-03-306,416
2025-03-317,178
2025-04-017,940
2025-04-028,702
2025-04-037,064
2025-04-047,826
2025-04-0511,588
2025-04-066,950
2025-04-077,712
2025-04-088,473
2025-04-096,835
2025-04-107,597
2025-04-118,358
2025-04-1212,119
2025-04-137,481
2025-04-148,242
2025-04-159,003
2025-04-167,364
2025-04-178,124
2025-04-188,885
2025-04-1910,245
2025-04-208,005
2025-04-218,764
2025-04-229,524
2025-04-237,883
2025-04-248,642
2025-04-259,401
2025-04-2610,759
2025-04-278,517
2025-04-289,275
2025-04-2910,033
2025-04-308,390
2025-05-019,147
2025-05-029,903
2025-05-0311,259
2025-05-049,015
2025-05-059,770
2025-05-068,125
2025-05-078,879
2025-05-089,633
2025-05-0910,387
2025-05-1011,740
2025-05-119,493
2025-05-1210,245
2025-05-138,597
2025-05-149,348
2025-05-1510,099
2025-05-168,449
2025-05-1712,199
2025-05-189,948
2025-05-1910,697
2025-05-209,045
2025-05-219,793
2025-05-2210,540
2025-05-238,887
2025-05-2412,633
2025-05-2510,378
2025-05-268,723
2025-05-279,467
2025-05-2810,210
2025-05-2910,953
2025-05-309,296
2025-05-3113,037
2025-06-0110,779
2025-06-029,119
2025-06-039,859
2025-06-0410,598
2025-06-058,937
2025-06-069,674
2025-06-0713,412
2025-06-0811,148
2025-06-099,484
2025-06-1010,219
2025-06-1110,954
2025-06-129,287
2025-06-1310,020
2025-06-1413,753
2025-06-159,084
2025-06-169,815
2025-06-1710,546
2025-06-1811,275
2025-06-199,604
2025-06-2010,332
2025-06-2114,059
2025-06-229,386
2025-06-2310,112
2025-06-2410,837
2025-06-259,162
2025-06-269,885
2025-06-2710,608
2025-06-2814,330
2025-06-299,652
2025-06-3010,373
2025-07-0111,093
2025-07-029,412
2025-07-0310,131
2025-07-0410,848
2025-07-0512,165
2025-07-069,882
2025-07-0710,597
2025-07-0811,312
2025-07-099,626
2025-07-1010,340
2025-07-1111,052
2025-07-1212,364
2025-07-1310,075
2025-07-1410,786
2025-07-159,096
2025-07-169,805
2025-07-1710,513
2025-07-1811,220
2025-07-1912,527
2025-07-2010,233
2025-07-2110,939
2025-07-229,244
2025-07-239,948
2025-07-2410,651
2025-07-258,954
2025-07-2612,656
2025-07-2710,357
2025-07-2811,058
2025-07-299,358
2025-07-3010,057
2025-07-3110,756
2025-08-019,054
2025-08-0212,751
2025-08-0310,448
2025-08-048,744
2025-08-059,439
2025-08-0610,134
2025-08-0710,829
2025-08-089,122
2025-08-0912,815
2025-08-1010,508
2025-08-118,800
2025-08-129,491
2025-08-1310,182
2025-08-148,472
2025-08-159,162
2025-08-1612,851
2025-08-1710,539
2025-08-188,828
2025-08-199,515
2025-08-2010,202
2025-08-218,489
2025-08-229,175
2025-08-2312,861
2025-08-248,146
2025-08-258,830
2025-08-269,515
2025-08-2710,199
2025-08-288,482
2025-08-299,165
2025-08-3012,848
2025-08-318,130
2025-09-018,812
2025-09-029,493
2025-09-037,774
2025-09-048,455
2025-09-059,136
2025-09-0612,816
2025-09-078,095
2025-09-088,775
2025-09-099,454
2025-09-107,733
2025-09-118,412
2025-09-129,090
2025-09-1310,368
2025-09-148,046
2025-09-158,724
2025-09-169,402
2025-09-177,679
2025-09-188,356
2025-09-199,033
2025-09-2010,310
2025-09-217,987
2025-09-228,663
2025-09-236,940
2025-09-247,616
2025-09-258,293
2025-09-268,969
2025-09-2710,245
2025-09-287,921
2025-09-298,597
2025-09-306,873
2025-10-017,549
2025-10-028,225
2025-10-036,501
2025-10-0410,177
2025-10-057,853
2025-10-068,529
2025-10-076,805
2025-10-087,482
2025-10-098,158
2025-10-106,434
2025-10-1110,111
2025-10-127,788
2025-10-136,064
2025-10-146,741
2025-10-157,419
2025-10-168,096
2025-10-176,373
2025-10-1810,051
2025-10-197,729
2025-10-206,007
2025-10-216,685
2025-10-227,364
2025-10-235,643
2025-10-246,322
2025-10-2510,001
2025-10-267,681
2025-10-275,961
2025-10-286,641
2025-10-297,322
2025-10-305,603
2025-10-316,284
2025-11-019,966
2025-11-025,248
2025-11-035,931
2025-11-046,613
2025-11-057,297
2025-11-065,580
2025-11-076,265
2025-11-089,949
2025-11-095,234
2025-11-105,920
2025-11-116,605
2025-11-124,892
2025-11-135,579
2025-11-146,266
2025-11-159,954
2025-11-165,242
2025-11-175,931
2025-11-186,621
2025-11-194,911
2025-11-205,601
2025-11-216,293
2025-11-227,584
2025-11-235,277
2025-11-245,969
2025-11-256,663
2025-11-264,957
2025-11-275,652
2025-11-286,347
2025-11-297,643
2025-11-305,339
2025-12-016,036
2025-12-024,334
2025-12-035,032
2025-12-045,732
2025-12-056,431
2025-12-067,732
2025-12-075,433
2025-12-086,135
2025-12-094,437
2025-12-105,140
2025-12-115,844
2025-12-124,148
2025-12-137,854
2025-12-145,559
2025-12-156,266
2025-12-164,573
2025-12-175,281
2025-12-185,990
2025-12-194,300
2025-12-208,010
2025-12-215,721
2025-12-226,432
2025-12-234,745
2025-12-245,458
2025-12-256,172
2025-12-264,486
2025-12-278,201
2025-12-285,918
2025-12-294,234
2025-12-304,952
2025-12-315,670
2026-01-016,389
2026-01-024,709
2026-01-038,429
2026-01-046,151
2026-01-054,472
2026-01-065,195
2026-01-075,919
2026-01-084,243
2026-01-094,968
2026-01-108,693
2026-01-116,420
2026-01-124,747
2026-01-135,475
2026-01-146,203
2026-01-154,532
2026-01-165,262
2026-01-178,993
2026-01-184,324
2026-01-195,057
2026-01-205,789
2026-01-216,523
2026-01-224,857
2026-01-235,592
2026-01-249,328
2026-01-254,664
2026-01-265,401
2026-01-276,138
2026-01-284,477
2026-01-295,215
2026-01-305,955
2026-01-319,695
2026-02-015,036
2026-02-025,778
2026-02-036,520
2026-02-044,863
2026-02-055,606
2026-02-066,350
2026-02-077,694
2026-02-085,440
2026-02-096,185
2026-02-106,932
2026-02-115,278
2026-02-126,026
2026-02-136,774
2026-02-148,122
2026-02-155,871
2026-02-166,621
2026-02-174,971
2026-02-185,722
2026-02-196,473
2026-02-207,224
2026-02-218,577
2026-02-226,329
2026-02-237,082
2026-02-245,436
2026-02-256,189
2026-02-266,944
2026-02-275,298
2026-02-289,054
2026-03-016,809
2026-03-027,565
2026-03-035,921
2026-03-046,678
2026-03-057,435
2026-03-065,792
2026-03-079,550
2026-03-087,308
2026-03-095,666
2026-03-106,425
2026-03-117,184
2026-03-127,943
2026-03-136,302
2026-03-1410,062
2026-03-157,822
2026-03-166,182
2026-03-176,942
2026-03-187,703
2026-03-196,064
2026-03-206,824
2026-03-2110,585
2026-03-228,347
2026-03-236,708
2026-03-247,469
2026-03-258,231
2026-03-266,593
2026-03-277,354
2026-03-2811,116
2026-03-296,478
2026-03-307,240
2026-03-318,002
2026-04-018,764
2026-04-027,126
2026-04-037,888
2026-04-0411,650
2026-04-057,012
2026-04-067,774
2026-04-078,536
2026-04-086,898
2026-04-097,659
2026-04-108,421
2026-04-1112,182
2026-04-127,544
2026-04-138,305
2026-04-149,066
2026-04-157,427
2026-04-168,188
2026-04-178,949
2026-04-1810,309
2026-04-198,069
2026-04-208,829
2026-04-219,589
2026-04-227,949
2026-04-238,708
2026-04-249,467
2026-04-2510,826
2026-04-268,584
2026-04-279,343
2026-04-287,701
2026-04-298,458
2026-04-309,215
2026-05-019,972
2026-05-0211,329
2026-05-039,085
2026-05-049,841
2026-05-058,196
2026-05-068,951
2026-05-079,706
2026-05-088,060
2026-05-0911,813
2026-05-109,567
2026-05-1110,320
2026-05-128,672
2026-05-139,424
2026-05-1410,175
2026-05-158,526
2026-05-1612,277
2026-05-1710,026
2026-05-188,376
2026-05-199,125
2026-05-209,873
2026-05-2110,621
2026-05-228,968
2026-05-2312,715
2026-05-2410,461
2026-05-258,806
2026-05-269,551
2026-05-2710,296
2026-05-288,639
2026-05-299,382
2026-05-3013,125
2026-05-3110,867
2026-06-019,208
2026-06-029,949
2026-06-0310,689
2026-06-049,028
2026-06-059,767
2026-06-0613,505
2026-06-078,842
2026-06-089,579
2026-06-0910,315
2026-06-1011,050
2026-06-119,385
2026-06-1210,119
2026-06-1313,852
2026-06-149,184
2026-06-159,916
2026-06-1610,647
2026-06-178,978
2026-06-189,708
2026-06-1910,437
2026-06-2014,165
2026-06-219,492
2026-06-2210,219
2026-06-2310,945
2026-06-249,271
2026-06-259,995
2026-06-2610,719
2026-06-2712,042
2026-06-289,765
2026-06-2910,486
2026-06-3011,207
2026-07-019,528
2026-07-0210,247
2026-07-0310,966
2026-07-0412,284
2026-07-0510,001
2026-07-0610,717
2026-07-079,033
2026-07-089,748
2026-07-0910,463
2026-07-1011,176
2026-07-1112,489
2026-07-1210,201
2026-07-1310,912
2026-07-149,223
2026-07-159,933
2026-07-1610,642
2026-07-178,951
2026-07-1812,658
2026-07-1910,365
2026-07-2011,072
2026-07-219,377
2026-07-2210,082
2026-07-2310,787
2026-07-249,090
2026-07-2512,793
2026-07-2610,495
2026-07-278,797
2026-07-289,497
2026-07-2910,198
2026-07-3010,897
2026-07-319,196
2026-08-0112,894
2026-08-0210,592
2026-08-038,888
2026-08-049,585
2026-08-0510,280
2026-08-068,575
2026-08-079,270
2026-08-0812,964
2026-08-0910,657
2026-08-108,950
2026-08-119,642
2026-08-1210,333
2026-08-138,624
2026-08-149,314
2026-08-1513,004
2026-08-168,293
2026-08-178,982
2026-08-189,670
2026-08-1910,358
2026-08-208,645
2026-08-219,332
2026-08-2213,018
2026-08-238,304
2026-08-248,989
2026-08-259,674
2026-08-2610,358
2026-08-278,642
2026-08-289,326
2026-08-2913,009
2026-08-308,292
2026-08-318,974
2026-09-019,656
2026-09-027,938
2026-09-038,619
2026-09-049,300
2026-09-0512,980
2026-09-068,260
2026-09-078,940
2026-09-089,620
2026-09-097,899
2026-09-108,578
2026-09-119,257
2026-09-1210,535
2026-09-138,214
2026-09-148,892
2026-09-159,570
2026-09-167,847
2026-09-178,525
2026-09-189,202
2026-09-1910,479
2026-09-208,156
2026-09-218,832
2026-09-227,109
2026-09-237,786
2026-09-248,462
2026-09-259,138
2026-09-2610,415
2026-09-278,091
2026-09-288,767
2026-09-297,043
2026-09-307,719
Default01 / 02

Usage

Import the component and the stylesheet once. See Getting started to install the package.

import { SpiralYearCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';
<SpiralYearCard title="Daily steps" data={dailySteps} date="date" value="steps" />

Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. surface="ghost" controls only the visual frame. See Card composition.

Data

One row per UTC day, over at most ten years. January sits at the top and each year is one turn further out, so seasons align. Each day is a bar standing out from the coil; its length and color carry the value. Null days keep a short stub. Duplicate days are rejected.

const dailySteps = [
  { date: '2024-01-01', steps: 4210 },
  { date: '2024-01-02', steps: 6890 },
  // …one row per day
];

Props

Every prop SpiralYearCard accepts, in the order you are likely to reach for them.

PropTypeDescription
titlestringOptional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set.
headerbooleanDefaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection.
aria-labelstringAccessible chart name, independent of the visible title. Falls back to title, then a generic chart name.
dataRow[]One row per observation. Omit when using ranges.
heightnumberMinimum plot height, default 380px. Dense data may expand within the scrollable viewport.
depthbooleanLit tiles, solid bars, or spheres. Data positions remain exact; loading keeps the same depth treatment.
colorstringOverride the palette with one CSS color.
aggregate'sum' | 'mean' | 'max'Resting headline summary; Strip defaults to mean, the others to sum.
headlinenumberOverride the resting headline.
deltanumberFractional change shown alongside the headline.
deltaTone'default' | 'inverse' | 'neutral'Use inverse when a decrease is good.
rangestringStatic period label.
ranges{ id, label, data, headline?, delta? }[]Period choices with their own data.
defaultRangestringInitial period id.
localestringLocale for numbers and dates; defaults to en-US.
formatValue(value: number) => stringCustom value formatter.
badgeReactNodeContent for the glass tab above the card.
classNamestringClass on the card frame.
styleCSSProperties | ChartStyleInline styles and scoped chart variables.
onSelectionChange(selection | null) => voidReports id, original row (or null for an absent day), value, and pinned state.
renderReadout(selection | null) => ReactNodeConsumer-owned readout, including when the header is hidden.
valueFormatIntl.NumberFormatOptionsFormats the headline, tiles, and axis, e.g. currency.
surface'elevated' | 'outline' | 'ghost'Card treatment. Ghost removes the visual frame only; header and legend are independent controls.
palette'iris' | 'cobalt' | 'emerald'Series colors. Iris by default; explicit series colors still win.
numberStyle'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble'How the headline animates when its value changes. Count (default) counts to the new value.
loadingbooleanShows a neutral loading skeleton, not data.
loadingStyle'shimmer' | 'draw' | 'breathe'Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion.
empty'dots' | 'shape' | ReactElement | nullWhat the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero.
motion'auto' | 'none'None turns off decorative motion; reduced motion does this automatically.
datedate, string, or numeric key of RowUTC date per day; numbers are milliseconds since the Unix epoch.
valuenumeric key of RowBar length, color, and headline.
fromstring | number | DateInclusive UTC bounds. Defaults to the first and last observed dates.
tostring | number | DateInclusive UTC bounds. Defaults to the first and last observed dates.
domain[number, number]Fixed value domain that must contain every value. Defaults to zero through the largest.
onKeyDownKeyboardEventHandler<HTMLElement>Keyboard handler on the card frame. Chart inspection also has its own keyboard handling.