Edit this page

Line Charts

The Kendo UI Line Chart widget displays data as continuous lines that pass through points defined by the values of their items. It is useful for rendering a trend over time and comparing several sets of similar data.

Configuration

Use the line series type to create a Kendo UI Line Chart.

Orientation

The Line Chart orientation can be changed by using verticalLine.

Example
$("#chart").kendoChart({
    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]
    }
});

Figure 1: A sample Line Chart

Line Chart

Types of Lines

The default line type is solid. However, dash styles are also available through the dashType option, as demonstrated in the example below.

Example

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

Figure 2: Dash line types

Dash Type

Line Styles

Kendo UI Line Charts support the rendering of lines between the points with different styles. The supported styles can be set via the style option and are:

  • Normal—This is the default style. It produces a straight line between data points.
  • Step—The 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 Area 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.

Figure 3: A step Line Chart

Step Line Chart

Figure 4: A smooth Line Chart

Smooth Line Chart

See Also

Other articles on Kendo UI Charts and chart types:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy