Chart Features Demo

Vertical Bar Charts

With explicit colors:

Test Results

0 10 21 31 42 42 Pass 8 Fail 3 Skip

With auto-assigned colors (6 items):

Monthly Sales

0 25 50 75 100 25 Q1 40 Q2 55 Q3 70 Q4 85 Q5 100 Q6

Horizontal Bar Charts

Department Headcount

0 11 22 33 45 45 Engineering 22 Marketing 31 Sales 18 Support 8 HR

With auto-colors and many items:

Feature Requests by Category

0 11 23 35 47 47 Category 1 44 Category 2 41 Category 3 38 Category 4 35 Category 5 32 Category 6 29 Category 7 26 Category 8 23 Category 9 20 Category 10 17 Category 11 14 Category 12

Pie Charts

With explicit colors:

Budget Allocation

Engineering (45 — 45%) Marketing (20 — 20%) Operations (15 — 15%) Sales (12 — 12%) Other (8 — 8%)

With auto-assigned colors:

Browser Market Share

Chrome (65 — 65%) Firefox (12 — 12%) Safari (10 — 10%) Edge (8 — 8%) Other (5 — 5%)

Donut Charts

Task Status

Completed (78 — 78%) In Progress (15 — 15%) Blocked (4 — 4%) Not Started (3 — 3%)

Storage Usage

Documents (42 — 42%) Images (28 — 28%) Videos (18 — 18%) Other (12 — 12%)

Line Charts

Single series:

Daily Active Users (Last 2 Weeks)

0 374 749 1124 1499 Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14

Multi-series line chart:

Error Rates by Service

0 4 8 12 16 Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 API Gateway Web App Background Jobs

Chart Options

Charts can be resized and aligned using WithOptions:

50% Width, Centered

0 5 10 15 20 10 A 20 B 15 C

60% Width, Right-Aligned

0 12 25 37 50 30 X 50 Y 20 Z