Distribution & Proportions

Visualize proportional data, market share, survey results, and category distributions using donut charts, ring charts, and labels.

When to Use These

Perfect for:

Market share and competitive analysis
Survey results and response distributions
Budget allocation across categories
Customer segmentation data
NPS scores and satisfaction ratings
Resource distribution
Category breakdowns and proportions

Donut Charts

`lc_doughnut_*`

Display segmented data in a circular donut chart format. The chart always displays as a complete circle with values proportionally adjusted to fill the entire circumference.

Element Setup

Main Element:

Element type: <circle>
ID format: lc_doughnut_* (e.g., lc_doughnut_nps, lc_doughnut_market-share)

Companion Element:

Use lc_label_* for legends and segment labels (see Labels section below)

Input Format

Basic Format - Values Only:

"58;32;10"

Creates three segments:

Segment 1: 58%
Segment 2: 32%
Segment 3: 10%

With Color Specification:

"58,#1E88E5;32,purple;10,orange"

Creates three colored segments:

Segment 1: 58% with hex color #1E88E5 (blue)
Segment 2: 32% with named color “purple”
Segment 3: 10% with named color “orange”

Color Options

CSS Color Names:

"45,red;30,blue;25,green"

Hexadecimal Values:

"45,#FF0000;30,#0000FF;25,#00FF00"

Mixed Formats:

"45,#1E88E5;30,purple;25,orange"

Default Colors: If no colors are specified, the system uses your project’s default color palette.

Value Processing

Minimum value: 1 (segments require at least 1 to be visible)
Zero values: Converted to 1
Negative values: Treated as 1
Proportional: Values are automatically scaled to fill 100% of the circle
Start position: Segments begin at 12 o’clock and progress clockwise

Usage Example

<!-- In your SVG -->
<circle id="lc_doughnut_nps" cx="200" cy="200" r="100" />
<text id="lc_label_nps-legend">Promoters;Passives;Detractors</text>

<!-- In your dataset -->
{{ nps }} = "58,green;32,yellow;10,red"
{{ nps-legend }} = "Promoters,green;Passives,yellow;Detractors,red"

Result: Three-segment donut showing NPS distribution with colored legend

Common Use Cases

NPS Scores:

"58,#4CAF50;32,#FFC107;10,#F44336"
Labels: "Promoters,#4CAF50;Passives,#FFC107;Detractors,#F44336"

Market Share:

"45,blue;30,purple;15,orange;10,gray"
Labels: "Product A,blue;Product B,purple;Product C,orange;Others,gray"

Budget Allocation:

"40,#2196F3;30,#4CAF50;20,#FF9800;10,#9C27B0"
Labels: "Engineering,#2196F3;Marketing,#4CAF50;Sales,#FF9800;Operations,#9C27B0"

Ring Charts

`lc_rings_*`

Display hierarchical or comparative data in concentric ring format. Ideal for showing multiple data points with emphasis on top performers through ring positioning.

Element Setup

Main Element:

Element type: <rect>
ID format: lc_rings_* (e.g., lc_rings_performance, lc_rings_comparison)

Input Format

JSON Array of Objects:

[
  {
    "value": 85,
    "label": "Artificial Intelligence Framework",
    "color": "#4285F4"
  },
  {
    "value": 72,
    "label": "Deep Neural Network Module",
    "color": "#EA4335"
  },
  {
    "value": 58,
    "label": "Machine Learning Pipeline",
    "color": "#FBBC04"
  }
]

Required Properties

value: Numeric value for ring sizing
- Negative values automatically converted to 0
- Higher values get outermost rings
label: Text description for the ring
- Displayed at the start of each ring
- Automatically formatted with value

Optional Properties

color: Color specification
- Hex codes: "#4285F4"
- CSS names: "royalblue"
- RGB values: "rgb(66, 133, 244)"
- If omitted, uses project’s color palette

Automatic Features

Auto-sorting: Rings automatically sort by value (highest = outermost)
Maximum rings: Displays up to 12 rings (additional data truncated)
Auto-sizing: Ring thickness and spacing calculated automatically
Label positioning: Labels placed at ring start with formatted values

Usage Example

<!-- In your SVG -->
<rect id="lc_rings_products" width="400" height="400" />

<!-- In your dataset (as JSON string) -->
{{ products }} = '[
  {"value": 85, "label": "Product A", "color": "#4285F4"},
  {"value": 72, "label": "Product B", "color": "#EA4335"},
  {"value": 58, "label": "Product C", "color": "#FBBC04"}
]'

Result: Three concentric rings with Product A (85) as outermost ring

Common Use Cases

Performance Comparison:

[
  { "value": 92, "label": "Q4 Revenue", "color": "green" },
  { "value": 85, "label": "Q3 Revenue", "color": "blue" },
  { "value": 78, "label": "Q2 Revenue", "color": "purple" }
]

Competitive Analysis:

[
  { "value": 45, "label": "Our Company", "color": "#2196F3" },
  { "value": 30, "label": "Competitor A", "color": "#FF5722" },
  { "value": 15, "label": "Competitor B", "color": "#FFC107" }
]

Hierarchical Data:

[
  { "value": 100, "label": "Total Market", "color": "#9C27B0" },
  { "value": 65, "label": "Our Segment", "color": "#4CAF50" },
  { "value": 25, "label": "Our Share", "color": "#2196F3" }
]

Labels and Legends

`lc_label_*`

Create labeled lists with optional colored bullets. While commonly used with donut charts, labels operate independently and work with any visualization.

Element Setup

Main Element:

Element type: <text>
ID format: lc_label_* (e.g., lc_label_legend, lc_label_categories)

Input Format

Basic Format - Labels Only:

"Label1;Label2;Label3"

Creates three labels without color bullets.

With Color Bullets:

"Label1,color1;Label2,color2;Label3,color3"

Adds colored circular bullets before each label.

With Word Wrapping:

"Long Label Text,blue,20;Another Long Label,red,20"

Third parameter sets character limit for word wrapping.

Color Options

Named Colors:

"Promoters,blue;Passives,purple;Detractors,orange"

Hex Values:

"Promoters,#1E88E5;Passives,#9C27B0;Detractors,#FF9800"

Default Colors: If colors are omitted, uses project’s default color palette:

"Category A;Category B;Category C"

Bullet Behavior

Auto-sizing: Bullet size scales with font size
Positioning: Placed to the left of label text
Spacing: Automatically calculated for clean alignment
Optional: Only appears when colors are specified

Usage Example

<!-- In your SVG -->
<text id="lc_label_nps-scores" x="50" y="100" font-size="16">
  Placeholder text
</text>

<!-- In your dataset -->
{{ nps-scores }} = "Promoters (9-10),#4CAF50;Passives (7-8),#FFC107;Detractors (0-6),#F44336"

Result: Three labeled items with colored bullets matching colors

Word Wrapping

With Character Limit:

"This is a very long product description that needs wrapping,blue,30"

Text wraps after 30 characters per line
Preserves word boundaries
Maintains bullet alignment

Multiple Wrapped Labels:

"Long Category Name One,blue,25;Long Category Name Two,green,25;Long Category Name Three,red,25"

Common Use Cases

Donut Chart Legend:

"Promoters (58%),green;Passives (32%),yellow;Detractors (10%),red"

Status Indicators:

"Completed,#4CAF50;In Progress,#2196F3;Not Started,#9E9E9E"

Product Categories:

"Enterprise Plan,#1E88E5;Professional Plan,#7B1FA2;Starter Plan,#F57C00"

Survey Responses:

"Strongly Agree,#4CAF50;Agree,#8BC34A;Neutral,#FFC107;Disagree,#FF5722;Strongly Disagree,#F44336"

Best Practices

Choosing the Right Chart

Use This	When You Need To
Donut	Show percentage distribution, compare parts to whole
Rings	Show hierarchical data, emphasize top performers, compare metrics
Labels	Add legends, create status lists, label any chart

Design Tips

Limit segments - Keep donut charts to 3-7 segments for clarity
Sort meaningfully - Order segments by size or importance
Use color wisely - Choose colors that convey meaning (red=negative, green=positive)
Add labels - Always include lc_label_* with donut charts
Match colors - Ensure label colors match chart segment colors
Include values - Show percentages or numbers in labels

Color Strategy

Status Colors:

✅ Green: Positive, success, promoters
⚠️ Yellow/Orange: Warning, neutral, passives
❌ Red: Negative, error, detractors
🔵 Blue: Neutral, information
⚫ Gray: Inactive, unknown, other

Brand Colors:

Use your company’s color palette
Maintain consistency across slides
Ensure sufficient contrast

Complete Example

NPS Score Visualization

<!-- In your SVG -->
<circle id="lc_doughnut_nps" cx="300" cy="200" r="120" />
<text id="lc_label_nps-legend" x="450" y="150" font-size="18">
  Placeholder
</text>

<!-- In your dataset -->
{{ nps }} = "58,#4CAF50;32,#FFC107;10,#F44336"
{{ nps-legend }} = "Promoters (58%),#4CAF50;Passives (32%),#FFC107;Detractors (10%),#F44336"

Result:

Donut chart with three segments (green, yellow, red)
Matching legend with colored bullets and percentages
Clear visual indication of NPS distribution

Troubleshooting

Issue	Solution
Donut not showing	Verify element is `<circle>` with correct ID prefix
Rings not displaying	Check element is `<rect>` and JSON is valid
Labels missing bullets	Add color specification: `"Label,color"`
Colors not matching	Ensure exact color values match between chart and labels
Segments too many	Limit to 5-7 segments for readability
Ring labels cut off	Increase rect dimensions to provide more space
Values don’t add to 100%	Values are automatically scaled - this is normal

Progress Metrics - Bar and column charts
Dynamic Colors - Change colors conditionally
Quick Reference - Syntax cheat sheet

← Back to Infographic Overview

Distribution & Proportions

When to Use These

Donut Charts

lc_doughnut_*

Element Setup

Input Format

Color Options

Value Processing

Usage Example

Common Use Cases

Ring Charts

lc_rings_*

Element Setup

Input Format

Required Properties

Optional Properties

Automatic Features

Usage Example

Common Use Cases

Labels and Legends

lc_label_*

Element Setup

Input Format

Color Options

Bullet Behavior

Usage Example

Word Wrapping

Common Use Cases

Best Practices

Choosing the Right Chart

Design Tips

Color Strategy

Complete Example

NPS Score Visualization

Troubleshooting

Related Features

`lc_doughnut_*`

`lc_rings_*`

`lc_label_*`