Donut Chart Examples

Comprehensive guide to using donut charts in DataGlass with various data formats and configurations.

Important: Donut charts use the D3 rendering engine. Make sure to enable the D3 engine in DataGlass settings (Settings → DataGlass → Enable D3 Engine).

Basic Donut Chart with Column-Based Data

Simple donut chart using column-based data format (x for labels, y for values):

View Source

type: donut
engine: d3
title: Sales by Region
x: region
y: sales
data:
  source: |
    region,sales
    North,25000
    South,35000
    East,30000
    West,20000

Donut Chart with Automatic Percentage Calculation

The strategy automatically calculates percentages from your data:

View Source

type: donut
engine: d3
width: 600
height: 500
title: Market Share Distribution
centerLabel: Total Market
centerValue: $110,000
x: company
y: revenue
data:
  source: |
    company,revenue
    Apple,45000
    Microsoft,40000
    Google,25000

Pre-Formatted Data with Percentages

You can also provide data with pre-calculated percentages:

View Source

type: donut
engine: d3
width: 500
height: 480
title: Budget Allocation
data:
  source: |
    label,value,percentage
    Development,45,45.0
    Testing,25,25.0
    Documentation,15,15.0
    DevOps,15,15.0

Customizing the Inner Radius

Control the size of the donut hole with innerRadiusRatio (0 = pie chart, 1 = minimal donut):

View Source

type: donut
engine: d3
width: 800
height: 480
title: Product Categories
innerRadiusRatio: 0.5
x: category
y: quantity
data:
  source: |
    category,quantity
    Electronics,150
    Clothing,200
    Food,100
    Other,50

Center Text Display

Add custom labels and values in the center of the donut:

View Source

type: donut
engine: d3
width: 550
height: 520
title: Q4 Performance
centerLabel: Total Revenue
centerValue: $2.5M
x: quarter
y: revenue
data:
  source: |
    quarter,revenue
    Q1,500000
    Q2,600000
    Q3,700000
    Q4,700000

Customizing Currencies and Labels

Adjust currency symbols and minimum label thresholds:

View Source

type: donut
engine: d3
width: 600
height: 500
title: International Revenue
currency: EUR
centerLabel: Total Revenue
centerValue: 2,500,000
minCategoryLabelPercentage: 8
minLabelPercentage: 5
x: country
y: amount
data:
  source: |
    country,amount
    Germany,850000
    France,700000
    Italy,550000
    Spain,400000

Custom Color Schemes

Use D3 color schemes for the donut segments:

View Source

type: donut
engine: d3
width: 500
height: 480
title: Team Distribution
colorScheme:
  - "#FF6B6B"
  - "#4ECDC4"
  - "#45B7D1"
  - "#FFA07A"
x: team
y: members
data:
  source: |
    team,members
    Frontend,15
    Backend,12
    DevOps,8
    Design,10
margin:
	left: 40

Disabling Animations and Accessibility

Create a static donut chart without hover effects:

View Source

type: donut
engine: d3
width: 500
height: 480
title: Static Donut Chart
animate: false
showAccessibility: false
x: item
y: value
data:
  source: |
    item,value
    A,30
    B,25
    C,25
    D,20

Large Donut Chart with Many Categories

Handling multiple categories with smart label placement:

View Source

type: donut
engine: d3
width: 700
height: 600
title: Expense Breakdown
minCategoryLabelPercentage: 10
minLabelPercentage: 3
x: category
y: amount
data:
  source: |
    category,amount
    Salaries,450000
    Office Rent,80000
    Equipment,60000
    Software,40000
    Utilities,25000
    Travel,30000
    Marketing,35000
    Other,15000

Data Mode Comparison

This example demonstrates both data modes:

Mode 1: Column-Based (Automatic Percentage Calculation)

View Source

type: donut
engine: d3
width: 500
height: 480
title: Browser Usage (Auto-Calculated)
x: browser
y: sessions
data:
  source: |
    browser,sessions
    Chrome,5500
    Firefox,2200
    Safari,1800
    Edge,1500

Mode 2: Pre-Formatted (Explicit Percentages)

View Source

type: donut
engine: d3
width: 500
height: 480
title: Browser Usage (Explicit Format)
data:
  source: |
    label,value,percentage
    Chrome,5500,55.0
    Firefox,2200,22.0
    Safari,1800,18.0
    Edge,1500,15.0
    Other,500,5.0

Handling Small Data Values

Configuration for handling charts with many small values:

View Source

type: donut
engine: d3
width: 600
height: 500
title: Traffic Sources
minLabelPercentage: 3
minCategoryLabelPercentage: 5
x: source
y: visitors
data:
  source: |
    source,visitors
    Google,85000
    Direct,32000
    Facebook,18000
    LinkedIn,12000
    Twitter,8000
    Reddit,5000
    Other,2000

Full Width Responsive Donut

Create a responsive chart that adapts to container width:

View Source

type: donut
engine: d3
width: 700
height: 500
#title: Project Time Allocation
innerRadiusRatio: 0.4
centerLabel: Total Hours
centerValue: 200
x: task
y: hours
data:
  source: |
    task,hours
    Development,100
    Testing,40
    Documentat,30
    Meetings,20
    Admin,10

Configuration Options Reference

Required Options

• type: donut - Chart type identifier
• x - Column name for category labels (or data with label field)
• y - Column name for values (or data with value field)

Optional Options

• title - Chart title displayed at top
• width - Chart width in pixels (default: 500)
• height - Chart height in pixels (default: 480)
• centerLabel - Text label in donut center (default: "Total")
• centerValue - Value to display in center
• currency - Currency symbol for ARIA labels (default: "RON")
• innerRadiusRatio - Donut hole size (0-1, default: 0.5)
• minLabelPercentage - Minimum % to show label (default: 5)
• minCategoryLabelPercentage - Minimum % to show category name (default: 8)
• animate - Enable hover tooltips (default: true)
• showAccessibility - Enable ARIA labels (default: true)
• colorScheme - Array of hex colors for segments

Data Format

Two data formats are supported:

Format 1: Column-Based

label,value
Category A,100
Category B,200

Format 2: Pre-Formatted

label,value,percentage
Category A,100,33.3
Category B,200,66.7

Tips and Best Practices

1. Percentage Thresholds: Adjust minLabelPercentage and minCategoryLabelPercentage for charts with many small slices

2. Colors: Use contrasting colors from D3 schemes (schemeTableau10, schemeCategory10, etc.)

3. Center Text: Center values are useful for displaying totals, percentages, or currency amounts

4. Responsive Design: Use width and height in proportion to your content area

5. Accessibility: Keep showAccessibility: true for better screen reader support

6. Performance: Charts with 50+ categories may become crowded - consider aggregating small values

Common Issues and Solutions

Issue: Labels are overlapping

Solution: Increase minLabelPercentage or minCategoryLabelPercentage to hide labels on smaller slices

Issue: Chart is too small

Solution: Increase width and height parameters

Issue: Data not displaying

Solution: Ensure your data has the correct column names specified in x and y

Issue: Percentages don't add up to 100%

Solution: Check if all values are positive numbers; negative values are converted to absolute values

See Also

• Pie Chart Examples - For traditional pie charts
• D3 Documentation - For advanced customization
• Observable Plot - For similar visualization patterns