Bar Chart

Bar charts display data as horizontal bars. The bar length represents the data value.

Usage

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

Basic Bar Chart
Item 1 40%
Item 2 60%
Item 3 80% 
Chart({ type: 'bar', labels: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Item 1'),
            Chart.Data({ value: 0.4 }, $('span', { class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Item 2'),
            Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Item 3'),
            Chart.Data({ value: 0.8 }, $('span', { class: 'data' }, '80%'))
        )
    )
)

Multiple Datasets

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

Quarterly Sales by Region
Q1 East West North
Q2 East West North
Q3 East West North 
Chart({ type: 'bar', multiple: true, labels: true, primaryAxis: true, spacing: 5 },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Q1'),
            Chart.Data({ value: 0.3, color: '#4CAF50' }, $('span', { class: 'data' }, 'East')),
            Chart.Data({ value: 0.5, color: '#2196F3' }, $('span', { class: 'data' }, 'West')),
            Chart.Data({ value: 0.4, color: '#FF9800' }, $('span', { class: 'data' }, 'North'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Q2'),
            Chart.Data({ value: 0.5, color: '#4CAF50' }, $('span', { class: 'data' }, 'East')),
            Chart.Data({ value: 0.6, color: '#2196F3' }, $('span', { class: 'data' }, 'West')),
            Chart.Data({ value: 0.7, color: '#FF9800' }, $('span', { class: 'data' }, 'North'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Q3'),
            Chart.Data({ value: 0.7, color: '#4CAF50' }, $('span', { class: 'data' }, 'East')),
            Chart.Data({ value: 0.8, color: '#2196F3' }, $('span', { class: 'data' }, 'West')),
            Chart.Data({ value: 0.5, color: '#FF9800' }, $('span', { class: 'data' }, 'North'))
        )
    )
)

Axes

Control axis visibility with primaryAxis and secondaryAxis:

With Primary and Secondary Axes
Jan 25%
Feb 50%
Mar 75%
Apr 100% 
Chart({ type: 'bar', labels: true, primaryAxis: true, secondaryAxis: 'show-4-secondary-axes' },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Jan'),
            Chart.Data({ value: 0.25 }, $('span', { class: 'data' }, '25%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Feb'),
            Chart.Data({ value: 0.5 }, $('span', { class: 'data' }, '50%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Mar'),
            Chart.Data({ value: 0.75 }, $('span', { class: 'data' }, '75%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Apr'),
            Chart.Data({ value: 1.0 }, $('span', { class: 'data' }, '100%'))
        )
    )
)

Spacing

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

spacing: 2

A
B
C

spacing: 15

A
B
C

Orientation

Use reverse: true to reverse the chart orientation:

Reversed Bar Chart
First 30%
Second 60%
Third 90% 
Chart({ type: 'bar', labels: true, reverse: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'First'),
            Chart.Data({ value: 0.3 }, $('span', { class: 'data' }, '30%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Second'),
            Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Third'),
            Chart.Data({ value: 0.9 }, $('span', { class: 'data' }, '90%'))
        )
    )
)

Stacked Bars

Create stacked bars by setting stacked: true (or using .stacked class):

Stacked Bar Chart
2021
2022
2023 
Chart({ type: 'bar', multiple: true, stacked: true, labels: true },
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, '2021'),
            Chart.Data({ value: 0.2, color: '#4CAF50' }),
            Chart.Data({ value: 0.3, color: '#2196F3' }),
            Chart.Data({ value: 0.1, color: '#FF9800' })
        ),
        // ... more rows
    )
)
← Back to Charts Column Chart →