All Components

Line

Line Charts are Categorical charts which display continuous data as lines that pass through points defined by the values of their items.

Basic Usage

The following example demonstrates the Line Chart in action.

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

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            tooltiptemplate: '#= series.name #: #= value #',
            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],
            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
        }
    }
})

Data Binding

You can bind the Line 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 Line Charts feature the following sub-types:

Stacked Line Charts

Stacked Line 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. You can also divide the line chart series in two parts, by setting missingValues -> gap and having null data value entries in the series data, which will be used as a divider. For more information inspect the SeriesDefaults option in the documentation.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Olympic Medals won by USA'"
                 :legend-visible="true"
                 :series-defaults-type="'line'"
                 :series-defaults-stack="true"
                 :value-axis-max="180"
                 :value-axis-line-visible="false"
                 :value-axis-axis-minor-grid-lines-visible="true"
                 :category-axis-categories="categories"
                 :category-axis-major-grid-lines-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template="tooltiptemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Gold Medals'"
                                             :data="goldMedalsData"
                                             :color="'#f3ac32'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Silver Medals'"
                                             :data="silverMedalsData"
                                             :color="'#b8b8b8'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Bronze Medals'"
                                             :data="bronzeMedalsData"
                                             :color="'#bb6e36'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            goldMedalsData: [40, 32, 34, 36, 45, 33, 34, null, 83, 36, 37, 44, 37, 35, 36, 46],
            silverMedalsData: [19, 25, 21, 26, 28, 31, 35, null, 60, 31, 34, 32, 24, 40, 38, 29],
            bronzeMedalsData: [17, 17, 16, 28, 34, 30, 25, null, 30, 27, 37, 25, 33, 26, 36, 29],
            categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
            tooltiptemplate: '#= series.name #: #= value #',
        }
    }
})

100% Stacked Line Charts

100% Stacked Line 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="'Olympic Medals won by USA'"
                 :legend-visible="true"
                 :series-defaults-type="'line'"
                 :series-defaults-stack-type="'100%'"
                 :value-axis-line-visible="false"
                 :value-axis-axis-minor-grid-lines-visible="true"
                 :category-axis-categories="categories"
                 :category-axis-major-grid-lines-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template="tooltiptemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Gold Medals'"
                                             :data="goldMedalsData"
                                             :color="'#f3ac32'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Silver Medals'"
                                             :data="silverMedalsData"
                                             :color="'#b8b8b8'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Bronze Medals'"
                                             :data="bronzeMedalsData"
                                             :color="'#bb6e36'"
                                             :missing-values="'gap'">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            goldMedalsData: [40, 32, 34, 36, 45, 33, 34, null, 83, 36, 37, 44, 37, 35, 36, 46],
            silverMedalsData: [19, 25, 21, 26, 28, 31, 35, null, 60, 31, 34, 32, 24, 40, 38, 29],
            bronzeMedalsData: [17, 17, 16, 28, 34, 30, 25, null, 30, 27, 37, 25, 33, 26, 36, 29],
            categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
            tooltiptemplate: '#= series.name #: #= value #',
        }
    }
})

Stepped Line Charts

The Stepped Line chart is a form of Line 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 line 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-axis-major-grid-lines-visible="true"
                 :value-axis-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="'line'"
                                             :k-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 Line 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-axis-major-grid-lines-visible="true"
                 :value-axis-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="'line'"
                                             :k-style="'smooth'"
                                             :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]
        }
    }
})

Functionality

Notes

In this example, you can see how to add notes for the Min and Max values of the Line chart. To do that you need to set the series -> notes and noteTextField settings which will also allow you to specify the note and its label position.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :data-source="grandSlam"
                 :title-text="'Roger Federer Grand Slam tournament performance'"
                 :legend-position="'bottom'"
                 :series-defaults-type="'line'"
                 :value-axis-line-visible="false"
                 :category-axis-major-grid-lines-visible="false"
                 :tooltip-visible="true"
                 :tooltip-template="tooltipTemplate"
                 :theme="'sass'">
                    <kendo-chart-series-item :name="'Wins'"
                                             :field="'win'"
                                             :category-field="'year'"
                                             :note-text-field="'extremum'"
                                             :notes-label-position="'bottom'"
                                             :notes-position="'bottom'">
                    </kendo-chart-series-item>
                    <kendo-chart-series-item :name="'Losses'"
                                             :field="'loss'">
                    </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            grandSlam: [{
                "year": "2003",
                "win": 13,
                "extremum": "MIN: 13",
                "loss": 3
            },{
                "year": "2004",
                "win": 22,
                "loss": 1
            },{
                "year": "2005",
                "win": 24,
                "loss": 2
            },{
                "year": "2006",
                "win": 27,
                "extremum": "MAX: 27",
                "loss": 1
            },{
                "year": "2007",
                "win": 26,
                "loss": 1
            },{
                "year": "2008",
                "win": 24,
                "loss": 3
            },{
                "year": "2009",
                "win": 26,
                "loss": 2
            },{
                "year": "2010",
                "win": 20,
                "loss": 3
            },{
                "year": "2011",
                "win": 20,
                "loss": 4
            },{
                "year": "2012",
                "win": 19,
                "loss": 3
            }],
            tooltipTemplate: '#= series.name #: #= value #'
        }
    }
})
In this article