New to Kendo UI for jQuery? Download free 30-day trial

Line Charts

Line Charts are suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items.

Getting Started

You can use the Line Chart to render a trend over time and compare sets of similar data.

To create a Line series, use line in the series configuration.

Setting the Orientation

You can change the orientation of the Line Chart by setting the series type to verticalLine.

    title: {
        text: "Internet Users"
    legend: {
        position: "bottom"
    seriesDefaults: {
        type: "line"
    series: [{
        name: "World",
        data: [15.7, 16.7, 20, 23.5, 26.6]
    }, {
        name: "United States",
        data: [67.96, 68.93, 75, 74, 78]
    valueAxis: {
        labels: {
            format: "{0}%"
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009]

Kendo UI for jQuery Line Chart Overview

Configuring the Line Styles

You can render the lines between the points by setting different styles through the style option.

The supported line styles are:

  • Normal—This is the default style. It produces a straight line between data points.
  • Step—This style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • Smooth—This style causes the Line Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.

Kendo UI for jQuery Step-line Line Chart example

The following image displays a smooth-line Line Chart.

Kendo UI for jQuery Smooth-line Line Chart example

Setting the Line Type

The default line type of a Line Chart is solid. You can implement the dash line styles by using the dashType option.

series: [{ name: "World", data: [15.7, 16.7, 20, 23.5, 26.6], dashType: "dot" }]

Kendo UI for jQuery Line Chart with a dash type of line

See Also

In this article