Column Chart

Column charts display data as vertical bars. The column height represents the data value.

Usage

To visualize data with a column chart, use type: 'column':

Basic Column Chart
Jan 40%
Feb 60%
Mar 80%
Apr 50% 
Chart({ type: 'column', labels: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Jan'),
            Chart.Data({ value: 0.4 }, $('span', { class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Feb'),
            Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Mar'),
            Chart.Data({ value: 0.8 }, $('span', { class: 'data' }, '80%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Apr'),
            Chart.Data({ value: 0.5 }, $('span', { class: 'data' }, '50%'))
        )
    )
)

Multiple Datasets

Add multiple Chart.Data elements per row and set multiple: true:

Sales by Product
Q1
Q2
Q3
Q4 
Chart({ type: 'column', multiple: true, labels: true, primaryAxis: true, spacing: 5 },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Q1'),
            Chart.Data({ value: 0.4, color: '#4CAF50' }),
            Chart.Data({ value: 0.6, color: '#2196F3' }),
            Chart.Data({ value: 0.3, color: '#FF9800' })
        ),
        // ... more rows
    )
)

Axes

Control axis visibility with primaryAxis and secondaryAxis:

With Grid Lines
A 20%
B 40%
C 60%
D 80%
E 100% 
Chart({ type: 'column', labels: true, primaryAxis: true, secondaryAxis: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'A'),
            Chart.Data({ value: 0.2 }, $('span', { class: 'data' }, '20%'))
        ),
        // ... more rows
    )
)

Spacing

Control the gap between columns with the spacing prop (1-20):

spacing: 2

A
B
C
D

spacing: 15

A
B
C
D

Stacked Columns

Create stacked columns by setting stacked: true:

Stacked Column Chart
Mon
Tue
Wed
Thu 
Chart({ type: 'column', multiple: true, stacked: true, labels: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Mon'),
            Chart.Data({ value: 0.2, color: '#4CAF50' }),
            Chart.Data({ value: 0.15, color: '#2196F3' }),
            Chart.Data({ value: 0.1, color: '#FF9800' })
        ),
        // ... more rows
    )
)
← Bar Chart Line Chart →