Skip to content
Charts — Component Gallery
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

Charts — Component Gallery

Chart

Dashboard Charts

BarLinePieDoughnutRadar
Bar
View DSL Source 
chart(type="bar" title="Monthly Revenue" labels="Jan,Feb,Mar,Apr,May")
  series(name="Revenue" values="4200,5100,4800,6200,7100")
  series(name="Costs" values="3100,3400,3200,3800,4100")
Line
View DSL Source 
chart(type="line" title="Weekly Trend" labels="Mon,Tue,Wed,Thu,Fri")
  series(name="Views" values="120,190,150,230,180" fill)
  series(name="Clicks" values="40,60,45,80,55")
Pie
View DSL Source 
chart(type="pie" title="Market Share" labels="Chrome,Firefox,Safari,Edge,Other")
  series(values="65,15,10,7,3")
Doughnut
View DSL Source 
chart(type="doughnut" title="Budget Allocation" labels="Engineering,Marketing,Sales,Support")
  series(values="45,25,20,10")
Radar
View DSL Source 
chart(type="radar" title="Skill Assessment" labels="Frontend,Backend,DevOps,Design,Testing")
  series(name="Current" values="80,70,60,50,75")
  series(name="Target" values="90,85,80,70,85")

Placeholder Charts

BarPie
Bar
View DSL Source 
chart(type="bar" label="Revenue Overview")
Pie
View DSL Source 
chart(type="pie" label="Distribution")

Sparkline

Inline Sparklines

InlineBarSizesStat Card
Inline
View DSL Source 
row(nowrap)
  text Sales are trending up
  sparkline(values="10,25,18,30,42,38,55")
  text this quarter.
row(nowrap)
  text Server load
  sparkline(values="80,60,45,70,55,40,35" color="rgba(34,197,94,1)")
  text is decreasing.
row(nowrap)
  text Error rate
  sparkline(values="2,5,8,12,15,18,22" color="rgba(244,63,94,1)")
  text needs attention.
Bar
View DSL Source 
row(nowrap)
  text Weekly commits
  sparkline(type="bar" values="12,8,15,20,6,18,14")
  text across the team.
  text Revenue per day
  sparkline(type="bar" values="4,7,5,9,6,8,10" color="rgba(234,179,8,1)")
  text looking good.
Sizes
View DSL Source 
row(nowrap)
  text Compact
  sparkline(values="3,7,4,8,5,9,6" width=60 height=14)
  text view.
row(nowrap)
  text Standard
  sparkline(values="3,7,4,8,5,9,6")
  text view.
row(nowrap align="center")
  text Large
  sparkline(values="3,7,4,8,5,9,6" width=120 height=32)
  text view.
Stat Card
View DSL Source 
row(gap="md")
  stat-card(title="Revenue" value="$48.2k" trend="+12%")
    sparkline(values="30,35,32,40,38,45,48" width=100 height=24)
  stat-card(title="Users" value="1,284" trend="+5%")
    sparkline(values="1100,1120,1180,1200,1220,1250,1284" width=100 height=24 color="rgba(34,197,94,1)")
  stat-card(title="Errors" value="23" trend="-8%" direction="down")
    sparkline(values="40,35,30,28,25,24,23" width=100 height=24 color="rgba(244,63,94,1)")
DSL Reference