All Components

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 (e.g., snapshots of data across different points in time).

Column charts are very similar to Bar charts, with the only difference that bars’ orientation is vertical instead of horizontal.

You can define the chart series as horizontal via 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. You can easily enable the stack feature through 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 #"
            }
        }
    }
})

In general, the data series in a stacked column or bar chart have one stack per category. There are cases in which you might want to arrange your data so that the chart appears to have more than one stack per category, i.e. grouping the stacks.

In the below example you can see how to group stacked columns to display the World population compared by age and sex in a specific period of time by setting the series -> stack option, which applies the name of the stack that the series belong to (Male or Female in this sample).

<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 chart type supports 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 as well as between series points within a category. This can be done through the :series-gap and :series-spacing props of the chart.

<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