Bar

Bar charts and Column charts are categorical charts which display data by using horizontal or vertical bars whose lengths vary according to their value.

Bar charts are suitable for displaying a comparison between several sets of data. For example, for showing a summary of unique and total site visitors over a certain period of time.

Basic Usage

The following example demonstrates the Bar chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Site Visitors Stats \n /thousands/'"
                 :legend-visible="false"
                 :series-defaults-type="'bar'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            },
            {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: [{
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})

Data Binding

You can bind the Bar series to an array that contains:

  • Numbers.
  • Arrays which represent [value, category] tuples.
  • Objects which are also referred to as models.

For more information on how to configure data-binding mode, refer to the article on binding the Kendo UI Chart to data.

Sub-Types

The Bar charts feature the following sub-types:

Column Chart

The Column chart visualizes data as vertical bars whose heights vary according to their value. It can be useful for presenting a comparison between several sets of data—for example, snapshots of data across different points in time.

Column charts are almost identical to Bar charts but the orientation of their bars is vertical and not horizontal. To define the chart series as horizontal, use the :series-defaults-type="'column'" prop.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Site Visitors Stats \n /thousands/'"
                 :legend-visible="false"
                 :series-defaults-type="'column'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            },
            {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: [{
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})

Stacked Bar Chart

A stacked bar is a bar divided into subparts to represent cumulative effect, to display money distribution or production against time. To enable the stack feature, use the :series-defaults-stack="true" prop.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Olympic Medals won by USA'"
                 :legend-visible="false"
                 :series-defaults-stack="true"
                 :series-defaults-type="'bar'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "Gold Medals",
                data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                color: "#f3ac32"
            }, {
                name: "Silver Medals",
                data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                color: "#b8b8b8"
            }, {
                name: "Bronze Medals",
                data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                color: "#bb6e36"
            }],
            valueAxis: [{
                 max: 180,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            }],
            categoryAxis: {
                categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})

The data series in a stacked Column or Bar chart have a single stack per category. You can arrange your data so that the chart will render more stacks per category—that is, you can group the stacks.

The following example demonstrates how to group stacked columns to display the world population compared by age and sex for a specific period of time by setting the stack option and apply the name of the stack to which the series belongs (Male or Female in the example).

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'World population by age group and sex'"
                 :legend-visible="false"
                 :series-defaults-type="'column'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :series-colors="seriesColors"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "0-19",
                stack: "Female",
                data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654]
            }, {
                name: "20-39",
                stack: "Female",
                data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439]
            }, {
                name: "40-64",
                stack: "Female",
                data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066]
            }, {
                name: "65-79",
                stack: "Female",
                data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956]
            }, {
                name: "80+",
                stack: "Female",
                data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029]
            }, {
                name: "0-19",
                stack: "Male",
                data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165]
            }, {
                name: "20-39",
                stack: "Male",
                data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507]
            }, {
                name: "40-64",
                stack: "Male",
                data: [364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563]
            }, {
                name: "65-79",
                stack: "Male",
                data: [74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156]
            }, {
                name: "80+",
                stack: "Male",
                data: [9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223]
            }],
            seriesColors: [
                "#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
                "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
            ],
            valueAxis: [{
                line: {
                    visible: false
                },
                labels: {
                    template: "#= kendo.format('{0:N0}', value / 1000) # M"
                }
            }],
            categoryAxis: {
                categories: [1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.stack #s, age #= series.name #"
            }
        }
    }
})

100% Stacked Bar Chart

The Bar charts support 100% stacking where the stacked series values are rescaled in a way they add up to 100%.

You can enable the 100% stack feature through the :series-defaults-stack-type="'100%'" chart attribute.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Olympic Medals won by USA'"
                 :legend-visible="false"
                 :series-defaults-stack-type="'100%'"
                 :series-defaults-type="'bar'"
                 :series="series"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "Gold Medals",
                data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                color: "#f3ac32"
            }, {
                name: "Silver Medals",
                data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                color: "#b8b8b8"
            }, {
                name: "Bronze Medals",
                data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                color: "#bb6e36"
            }],
            valueAxis: [{
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            }],
            categoryAxis: {
                categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})

Gap and Spacing

The Bar chart component allows you to control the distance between its categories and between the series points within a category through the :series-gap and :series-spacing props.

<div id="vueapp" class="vue-app">
    <span>Gap: </span>
    <kendo-chart :title-text="'Site Visitors Stats \n /thousands/'"
                 :legend-visible="false"
                 :series-defaults-type="'column'"
                 :category-axis="categoryAxis"
                 :value-axis="valueAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
        <kendo-chart-series-item :gap="0.3"
                                 :spacing="0.6"
                                 :name="'Total Visits'"
                                 :data="[56000, 63000, 74000, 91000, 117000, 138000]">
        </kendo-chart-series-item>
        <kendo-chart-series-item :gap="0.3"
                                 :spacing="0.6"
                                 :name="'Unique visitors'"
                                 :data="[52000, 34000, 23000, 48000, 67000, 83000]">
        </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            valueAxis: [{
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        }
    }
})

In this article