All Components

Area

Area Charts are categorical charts which are suitable for displaying quantitative data by using continuous lines.

The Area Chart is suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items. The portion of the graph beneath the lines is filled with a particular color for each series. The different colors in an Area Chart are useful for emphasizing changes in values coming from several sets of similar data.

Basic Usage

The following example demonstrates the Area Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Gross domestic product growth \n /GDP annual %/'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'area'"
                 :category-axis-categories="categoryAxisData"
                 :category-axis-major-grid-lines-visible="false"
                 :category-axis-labels-rotation="'auto'"
                 :value-axis-labels-format="'{0}%'"
                 :value-axis-line-visible="false"
                 :value-axis-axis-crossing-value="-10"
                 :tooltip-visible="true"
                 :tooltip-format="'{0}%'"
                 :tooltip-template="tooltipTemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'India'"
                                             :data="indiaData"
                                             :line-style="'smooth'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'World'"
                                             :data="worldData"
                                             :line-style="'smooth'">
                    </kendo-chart-series-item>
                     <kendo-chart-series-item :name="'Haiti'"
                                              :data="haitiData"
                                              :line-style="'smooth'">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            indiaData: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
            worldData: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727],
            haitiData: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590],
            categoryAxisData:  [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            tooltipTemplate: "#= series.name #: #= value #"
        }
    }
})

Data Binding

You can bind the Area 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 each data-binding mode, refer to the article on binding the Kendo UI Chart to data.

Sub-Types

The Area Charts feature the following sub-types:

Stacked Area Charts

Stacked Area Charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set the seriesDefaults -> stack setting to true.

Multiple series rendered in the same area chart will overlap one another by default. To avoid that, you have the option to stack these series on top of one another, so that the data values at each x-value are summed. In an area chart, the value for each series will always be stacked relative to the preceding one.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Browser Usage Trends'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'area'"
                 :series-defaults-stack="true"
                 :value-axis-labels-format="'{0}%'"
                 :value-axis-max="100"
                 :value-axis-line-visible="false"
                 :value-axis-axis-crossing-value="-10"
                 :category-axis-categories="categories"
                 :category-axis-major-grid-lines-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template-format="'{0}%'"
                 :tooltip-template="tooltipTemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Chrome'"
                                             :data="chromeData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Firefox'"
                                             :data="firefoxData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Internet Explorer'"
                                             :data="ieData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Mozilla'"
                                             :data="mozillaData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Opera'"
                                             :data="operaData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Safari'"
                                             :data="safariData">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            chromeData: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6],
            firefoxData: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7],
            ieData: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2],
            mozillaData: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0],
            operaData: [1.6, 1.5, 1.5, 1.6, 2.4, 2.3, 2.2, 2.5],
            safariData: [0, 0, 0, 1.8, 2.7, 3.6, 3.8, 4.2],
            categories: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            tooltipTemplate: '#= series.name #: #= value #'
        }
    }
})

100% Stacked Area Charts

100% Stacked Area Charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, the seriesDefaults-> stack -> type setting should be set.

While it is possible to plot negative values in a 100% Stacked Chart, the results are hard for the user to interpret.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Browser Usage Trends'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'area'"
                 :series-defaults-stack-type="'100%'"
                 :value-axis-line-visible="false"
                 :category-axis-categories="categories"
                 :category-axis-major-grid-lines-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template-format="'{0}%'"
                 :tooltip-template="tooltipTemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Chrome'"
                                             :data="chromeData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Firefox'"
                                             :data="firefoxData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Internet Explorer'"
                                             :data="ieData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Mozilla'"
                                             :data="mozillaData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Opera'"
                                             :data="operaData">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Safari'"
                                             :data="safariData">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            chromeData: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6],
            firefoxData: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7],
            ieData: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2],
            mozillaData: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0],
            operaData: [1.6, 1.5, 1.5, 1.6, 2.4, 2.3, 2.2, 2.5],
            safariData: [0, 0, 0, 1.8, 2.7, 3.6, 3.8, 4.2],
            categories: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            tooltipTemplate: '#= series.name #: #= value #'
        }
    }
})

Stepped Area Charts

The Stepped Area chart is a variation of area chart where each data point from the series is connected with vertical and horizontal lines to form a step-like progression. This type of line visualization is useful when you want to highlight the increase or decrease in values over time. The stepped area chart can be configured through the series -> style settings of the Kendo UI Chart.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'A digital signal'"
                 :legend-visible="false"
                 :value-axis-max="22"
                 :value-axis-title-text="'voltage'"
                 :value-axis-major-grid-lines-visible="false"
                 :value-axis-visible="false"
                 :category-axis-title-text="'time'"
                 :category-axis-major-grid-lines-visible="false"
                 :category-axis-major-ticks-visible="false"
                 :theme="'sass'">
                    <kendo-chart-series-item :data="series"
                                             :type="'area'"
                                             :line-style="'step'"
                                             :markers-visible="false">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5, 13, 3, 16, 1, 19, 1, 20, 2, 18, 5, 12, 7, 10, 8]
        }
    }
})

Smooth Area Charts

A Spline chart is a form of line chart where each data point from the series is connected with a curved line, which represents a rough approximation of the missing data points. The smooth line chart can be configured through the series -> style settings of the chart.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Analog signal'"
                 :legend-visible="false"
                 :value-axis-max="22"
                 :value-axis-title-text="'voltage'"
                 :value-axis-major-grid-lines-visible="true"
                 :value-axis-visible="false"
                 :category-axis-title-text="'time'"
                 :category-axis-major-grid-lines-visible="false"
                 :category-axis-major-ticks-visible="false"
                 :theme="'sass'">
                    <kendo-chart-series-item :data="series"
                                             :type="'area'"
                                             :line-style="'smooth'">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5, 13, 3, 16, 1, 19, 1, 20, 2, 18, 5, 12, 7, 10, 8]
        }
    }
})
In this article