Pie Chart

Key Features

Customizable Design

Choose from default, modern, minimalistic, cyberpunk, professional themes, or use a custom theme with many configurable options for font, border, grid, text, and full custom color control.

Pie & Donut Variants

Adjust inner radius to create pie or donut charts with smooth transitions

Interactive Elements

Hover tooltips, clickable legends, and animated slices

Dark Mode Support

Seamlessly toggle between light and dark themes

Value Formatting (K/M/B/T)

Shortens large numbers for clarity (e.g., 125000 → 125K)

Perfect For

Market Share Analysis

Show company or product market distribution

Budget Allocation

Visualize expense or resource distribution

Survey Results

Display poll or questionnaire outcomes

Portfolio Breakdown

Illustrate investment or asset allocation

Configuration Options

Option	Type	Default	Description
design	string	default	Chart design preset ('default', 'modern', 'minimalistic', 'cyberpunk', 'professional', 'custom')
background	string	transparent	Background color or gradient when design is `custom` (e.g., #hex, transparent, linear-gradient(...))
textColor	string	#111827	Text color when design is `custom` (e.g., #hex)
gridColor	string	#E5E7EB	Grid line color when design is `custom` (e.g., #hex)
borderColor	string	#D1D5DB	Border color when design is `custom` (e.g., #hex)
borderRadius	number	8	Border radius in pixels when design is `custom` (0-20)
shadowBlur	number	10	Shadow blur radius in pixels when design is `custom` (0-30)
shadowOffset	number	2	Shadow offset in pixels when design is `custom` (0-10)
fontSize	number	12	Font size in pixels when design is `custom` (8-18)
fontFamily	string	Inter, system-ui, sans-serif	Font family when design is `custom` (e.g., Inter, system-ui, sans-serif)
fontWeight	string	normal	Font weight when design is `custom` (normal, 500, 600, bold)

customColor	boolean	false	Enable custom colors for pie slices (specified in data objects)
innerRadius	number	0	Inner radius for donut charts (0-0.6)
slicePadding	number	0	Angular padding between slices in radians (0-0.1)
startAngle	number	-Math.PI/2	Starting angle for the first slice in radians (-Math.PI to Math.PI)
showLabels	boolean	true	Show labels for each slice
showLegend	boolean	true	Show legend for slices
showTooltip	boolean	true	Show tooltips on hover
showValues	boolean	true	Show percentage values on slices
animations	boolean	true	Enable drawing animations
animationDuration	number	2000	Animation duration in milliseconds (500-5000)
glowEffect	boolean	false	Enable glow effect on slices
useKFormat	boolean	false	Enable K/M/B/T formatting for values (e.g., 1000 as 1.0K, 1000000 as 1.0M)
valuePrefix	string	''	Prefix for slice values (e.g., '$')
valueAfterfix	string	''	Suffix for slice values (e.g., ' USD')

Data Format

Basic Format

pieChart.setData([
                    { name: 'Desktop', value: 45, color: '#3B82F6' },
                    { name: 'Mobile', value: 35, color: '#10B981' },
                    { name: 'Tablet', value: 20, color: '#F59E0B' }
                ]);

Minimal Format

pieChart.setData([
                    { name: 'Category A', value: 30 },
                    { name: 'Category B', value: 70 }
                ]);

Data Structure

Each data point requires a name and value. Include color for custom styling when customColor: true.

ChartForge