Radial Bar 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.

Circular Progress Design

Concentric radial bars for intuitive progress visualization

Multi-Metric Support

Display multiple KPIs or metrics in concentric bars

Custom Bar Width & Spacing

Adjust bar width and spacing to suit data density and visual preferences

Custom Inner Radius

Configure inner radius size, from small to large

Value Formatting (K/M/B/T)

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

Perfect For

KPI Dashboards

Track sales targets, revenue goals, and metrics

Progress Tracking

Monitor project completion or task progress

Performance Ratings

Visualize employee or product performance

Resource Utilization

Show server capacity or resource usage

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 radial bars (specified in data objects)
innerRadius	number	0.3	Inner radius ratio for radial bars (0.1-0.5)
barWidth	number	20	Width of each radial bar in pixels (10-30)
barSpacing	number	10	Spacing between radial bars in pixels (5-20)
startAngle	number	-Math.PI/2	Starting angle for radial bars in radians (-Math.PI to Math.PI)
endAngle	number	Math.PI*1.5	Ending angle for radial bars in radians (-Math.PI to Math.PI*2)
showTooltip	boolean	true	Show tooltips on hover
showLabels	boolean	true	Show labels for each radial bar
showLegend	boolean	false	Show legend for radial bars
showValues	boolean	true	Show percentage values at bar ends
centerText	boolean	true	Show summary text in the center
animations	boolean	true	Enable drawing animations
animationDuration	number	2000	Animation duration in milliseconds (500-5000)
glowEffect	boolean	false	Enable glow effect on radial bars
useKFormat	boolean	false	Enable K/M/B/T formatting for bar values (e.g., 1000 as 1.0K, 1000000 as 1.0M)
valuePrefix	string	''	Prefix for bar values (e.g., '$')
valueAfterfix	string	''	Suffix for bar values (e.g., ' USD')

Data Format

Basic Format

radialBarChart.setData([
                    { name: 'Sales Goal', value: 85, max: 100 },
                    { name: 'Marketing ROI', value: 92, max: 100 },
                    { name: 'Customer Satisfaction', value: 78, max: 100 }
                ]);

Customized Format

radialBarChart.setData([
                    { name: 'Revenue Target', value: 87000, max: 100000, color: '#1E40AF' },
                    { name: 'Customer Acquisition', value: 9400, max: 10000, color: '#059669' },
                    { name: 'Market Share', value: 73, max: 100, color: '#DC2626' }
                ]);

Data Structure

Each data item requires name, value, and max. Include color for custom styling when customColor: true.

ChartForge