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.


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


The Line Chart orientation can be changed by using 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]

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.


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

In this article
Not finding the help you need? Improve this article