The Infographic component (ui:infographic) renders multi-section visual summaries. Each section can contain stats, progress bars, facts, text, pie charts, dividers, and ratings. Consecutive items of the same type are automatically grouped for optimized layout.
Examples
View Glyph Markdown source
```ui:infographic
title: Company Overview
sections:
- heading: Key Metrics
items:
- type: stat
label: Revenue
value: "$12.5M"
- type: stat
label: Customers
value: "2,340"
- type: stat
label: Growth
value: "+28%"
- heading: Goals Progress
items:
- type: progress
label: Q4 Target
value: 78
- type: progress
label: Customer Satisfaction
value: 92
```
Mixed content
View Glyph Markdown source
```ui:infographic
title: Project Report
sections:
- items:
- type: text
content: "The Q4 results exceeded expectations across all key metrics."
- type: stat
label: Revenue
value: "$8.2M"
- type: stat
label: Profit
value: "$2.1M"
- type: progress
label: Annual Target
value: 91
- type: fact
icon: "\u2713"
text: Largest quarter in company history
- type: fact
icon: "\u2713"
text: Customer base grew 34% year-over-year
```
Pie charts
Pie items render as SVG donut charts by default. Set donut: false for a filled pie, or customize size and individual slice color values.
View Glyph Markdown source
```ui:infographic
title: Revenue by Region
sections:
- items:
- type: pie
label: Donut (default)
slices:
- label: North America
value: 42
- label: Europe
value: 28
- label: Asia Pacific
value: 18
- label: Other
value: 12
- type: pie
label: Solid pie
donut: false
size: 120
slices:
- label: Enterprise
value: 55
color: "#6366f1"
- label: Business
value: 30
color: "#06b6d4"
- label: Starter
value: 15
color: "#f43f5e"
```
Ratings
Rating items display star indicators with support for half-star precision and a custom max scale.
View Glyph Markdown source
```ui:infographic
title: Restaurant Review
sections:
- heading: Scores
items:
- type: rating
label: Food Quality
value: 5
description: Exceptional seasonal menu
- type: rating
label: Ambiance
value: 4.5
description: Cozy and well-lit
- type: rating
label: Service
value: 4
- type: rating
label: Wait Time
value: 2.5
description: Busy weekends
- heading: Quick Score (3-star scale)
items:
- type: rating
label: Would Visit Again
value: 3
max: 3
- type: rating
label: Recommend to Friend
value: 2.5
max: 3
```
Dividers
Divider items visually separate content within a section. Three styles are available: solid (default), dashed, and dotted.
View Glyph Markdown source
```ui:infographic
title: Divider Styles
sections:
- items:
- type: stat
label: Users
value: "12,400"
- type: divider
- type: stat
label: Revenue
value: "$3.1M"
- type: divider
style: dashed
- type: progress
label: Q4 Target
value: 78
- type: divider
style: dotted
- type: fact
icon: "\u2713"
text: All systems operational
```
Full dashboard
All seven item types combined into a multi-section dashboard.
View Glyph Markdown source
```ui:infographic
title: SaaS Product Dashboard — Q4 2025
sections:
- heading: Key Metrics
items:
- type: stat
label: MRR
value: "$842K"
description: "+12% MoM"
- type: stat
label: Active Users
value: "24,800"
description: "+3,200 this month"
- type: stat
label: Churn
value: "1.4%"
description: Down from 2.1%
- heading: Customer Satisfaction
items:
- type: rating
label: NPS Score
value: 4.5
description: "Promoters: 72%"
- type: rating
label: Support Rating
value: 4
description: "Avg. resolution: 2.4 hrs"
- type: divider
- type: fact
icon: "\u2713"
text: CSAT improved 8 points since Q3
- type: fact
icon: "\u2713"
text: First response time under 15 minutes
- heading: Revenue Breakdown
items:
- type: pie
label: By Plan
slices:
- label: Enterprise
value: 55
- label: Business
value: 30
- label: Starter
value: 12
- label: Free Trial
value: 3
- type: pie
label: By Region
slices:
- label: Americas
value: 48
- label: EMEA
value: 32
- label: APAC
value: 20
- heading: OKR Progress
items:
- type: progress
label: Reach $1M MRR
value: 84
- type: progress
label: Ship V2 Platform
value: 92
- type: progress
label: Expand to 3 New Markets
value: 67
- type: divider
style: dashed
- type: text
content: "Overall OKR attainment is on track. The latency goal requires additional infrastructure investment planned for January."
```
Properties
Property
Type
Required
Default
Description
title
string
No
—
Optional heading displayed above all sections.
sections
InfographicSection[]
Yes
—
Array of 1—8 section objects (see below).
markdown
boolean
No
false
Enable inline markdown formatting (bold, italic, links, code) in text fields.
InfographicSection
Property
Type
Required
Default
Description
heading
string
No
—
Bold heading displayed at the top of the section.
items
InfographicItem[]
Yes
—
Array of items (min 1). Each item is one of the types below.
Item types
Items use a discriminated union on the type field:
stat
Property
Type
Required
Description
type
"stat"
Yes
Discriminator.
label
string
Yes
Label below the value.
value
string
Yes
Large display value (e.g. “$2.3M”).
description
string
No
Additional context below the label.
fact
Property
Type
Required
Description
type
"fact"
Yes
Discriminator.
icon
string
No
Icon prefix (emoji or character).
text
string
Yes
Fact text.
progress
Property
Type
Required
Description
type
"progress"
Yes
Discriminator.
label
string
Yes
Label for the progress bar.
value
number
Yes
Percentage 0—100.
color
string
No
Custom fill color (CSS value).
text
Property
Type
Required
Description
type
"text"
Yes
Discriminator.
content
string
Yes
Paragraph text.
pie
Property
Type
Required
Description
type
"pie"
Yes
Discriminator.
label
string
No
Title above the chart.
slices
PieSlice[]
Yes
Array of 1—12 slices (see below).
donut
boolean
No
Render as donut (default true).
size
number
No
Diameter in px, 80—300 (default 160).
PieSlice
Property
Type
Required
Description
label
string
Yes
Legend label.
value
number
Yes
Positive numeric value (proportional).
color
string
No
Custom fill color (CSS value).
divider
Property
Type
Required
Description
type
"divider"
Yes
Discriminator.
style
"solid" | "dashed" | "dotted"
No
Line style (default "solid").
rating
Property
Type
Required
Description
type
"rating"
Yes
Discriminator.
label
string
Yes
Label for the rating.
value
number
Yes
Rating value 0—5 (supports halves).
max
number
No
Maximum stars 1—5 (default 5).
description
string
No
Additional context text.
Markdown Support
Enable inline markdown formatting in text items and descriptions:
View Glyph Markdown source
```ui:infographic
title: Company Overview
sections:
- heading: Key Metrics
items:
- type: text
content: "Our **Q4 results** exceeded expectations. Read the [full report](https://example.com)."
- type: stat
label: "Revenue *YoY*"
value: "$12.5M"
description: "Up **28%** from Q3"
- type: fact
icon: "\u2713"
text: "Largest quarter in `company.history`"
- type: rating
label: "Customer **NPS**"
value: 4.5
description: "Score improved from *4.2* last quarter"
