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

<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, set series-defaults-stack-type.

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 for highlighting the increase or decrease in values over time. To configure the stepped Line chart, set the k-style setting of the series.

<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

In the smooth Line chart each data point from the series is connected with a curved line which represents a rough approximation of the missing data points. To configure the smooth Line chart, set the k-style configuration of the series.

<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 and Features

The Line charts provide options for setting their notes.

Notes

The following example demonstrates how to add notes for the min and max values of the Line chart by setting the notes configuration of the series. The setting of the noteTextField option 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