Column 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 columns for complex comparisons

Custom Value Axis Scaling

Set custom vertical axis scaling with defined min and max values

Vertical Layout

Ideal for comparing categories and multi-series data

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

Revenue Tracking

Visualize sales, revenue, or financial performance across periods

Team Performance

Compare productivity or KPIs across teams or departments

Survey Results

Display response distributions or poll results

Budget Analysis

Break down expenses or budgets by category

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)
columnSpacing	number	0.2	Spacing between columns 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 vertically
showGrid	boolean	true	Show background grid lines
showLabels	boolean	true	Show category labels on x-axis
showLegend	boolean	false	Show legend for multi-series charts
showTooltip	boolean	true	Show tooltips on hover
showValues	boolean	true	Show values above columns
animations	boolean	true	Enable drawing animations
animationDuration	number	2000	Animation duration in milliseconds (500-5000)
glowEffect	boolean	false	Enable glow effect on columns
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 y-axis and column values (e.g., '$')
valueAfterfix	string	''	Suffix for y-axis and column values (e.g., ' USD')
valueAxisMin	number	0	Custom minimum value for the y-axis.
valueAxisMax	number	null	Custom maximum value for the y-axis. If null, uses the maximum data value.

Data Format

Single Series

columnChart.setData([
                    { name: 'Q1 2024', value: 25000, color: '#3B82F6' },
                    { name: 'Q2 2024', value: 32000, color: '#10B981' },
                    { name: 'Q3 2024', value: 28000, color: '#F59E0B' },
                    { name: 'Q4 2024', value: 35000, color: '#8B5CF6' }
                ]);

Multi-Series (Grouped/Stacked)

columnChart.setData([
                    { 
                        name: 'Q1', 
                        value: [25000, 22000, 30000], 
                        color: ['#3B82F6', '#10B981', '#F59E0B'] 
                    },
                    { 
                        name: 'Q2', 
                        value: [32000, 28000, 35000], 
                        color: ['#3B82F6', '#10B981', '#F59E0B'] 
                    },
                    { 
                        name: 'Q3', 
                        value: [28000, 31000, 26000], 
                        color: ['#3B82F6', '#10B981', '#F59E0B'] 
                    }
                ]);

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