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.

Multi-Series Support

Display grouped or stacked bars for complex comparisons

Custom Value Axis Scaling

Set custom horizontal axis scaling with defined min and max values

Horizontal Layout

Ideal for long category names and ranking visualizations

Bar Spacing

Editable column spacing (from tight to wide)

Value Formatting (K/M/B/T)

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

Perfect For

Rankings & Leaderboards

Show top performers or competitive standings

Survey Results

Visualize response distributions or feedback scores

Budget Allocation

Display resource distribution across categories

Long Category Names

Accommodate descriptive labels without truncation

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 data series (specified in data objects)
barSpacing	number	0.2	Spacing between bars within a group (0-0.5)
groupSpacing	number	0.1	Spacing between groups in multi-series (0-0.5)
stacked	boolean	false	Stack multiple series horizontally
showGrid	boolean	true	Show background grid lines
showLabels	boolean	true	Show category labels on y-axis
showLegend	boolean	false	Show legend for multi-series charts
showTooltip	boolean	true	Show tooltips on hover
showValues	boolean	true	Show values at the end of bars
animations	boolean	true	Enable drawing animations
animationDuration	number	2000	Animation duration in milliseconds (500-5000)
glowEffect	boolean	false	Enable glow effect on bars
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 x-axis and bar values (e.g., '$')
valueAfterfix	string	''	Suffix for x-axis and bar values (e.g., ' USD')
valueAxisMin	number	0	Custom minimum value for the x-axis.
valueAxisMax	number	null	Custom maximum value for the x-axis. If null, uses the maximum data value.

Data Format

Single Series

barChart.setData([
                    { name: 'Tesla Model S', value: 105000, color: '#FF6B6B' },
                    { name: 'BMW i4', value: 85000, color: '#4ECDC4' },
                    { name: 'Mercedes EQS', value: 98000, color: '#45B7D1' },
                    { name: 'Audi e-tron GT', value: 112000, color: '#96CEB4' },
                    { name: 'Porsche Taycan', value: 125000, color: '#FFEEAD' }
                ]);

Multi-Series (Grouped/Stacked)

barChart.setData([
                    { 
                        name: 'Q1', 
                        value: [25000, 22000, 30000], 
                        color: ['#FF6B6B', '#4ECDC4', '#45B7D1'] 
                    },
                    { 
                        name: 'Q2', 
                        value: [32000, 28000, 35000], 
                        color: ['#FF6B6B', '#4ECDC4', '#45B7D1'] 
                    },
                    { 
                        name: 'Q3', 
                        value: [28000, 31000, 26000], 
                        color: ['#FF6B6B', '#4ECDC4', '#45B7D1'] 
                    }
                ]);

Data Structure

Use a single value for single-series charts or an array of values for multi-series (grouped or stacked, set stacked: true for stacking). Include color for custom styling when customColor: true.

ChartForge