New to Kendo UI for Angular? Start a free 30-day trial

Line

Line charts and Vertical Line charts are categorical charts, which display continuous data as lines that pass through points defined by the values of their items.

Basics

Line charts are useful for rendering trends over time or at equal time intervals, and for comparing sets of similar data.

Vertical Line charts are functionally equivalent to Line charts, but transpose the axes—the category axis is vertical and the value axis is horizontal.

Horizontal Line Chart

The following example demonstrates the Angular Line chart in action.

Example
View Source
Change Theme:

Vertical Line Chart

The following example demonstrates the Angular Vertical Line chart in action.

Example
View Source
Change Theme:

Choosing Between Line or Scatter Line Charts

Line charts and Scatter Line charts look visually the same because the data points in the plot area are connected with lines. However, they significantly differ in the way each series type plots the data it presents in the plot area.

In Line charts, the vertical axis is a value axis and the horizontal axis is a category axis. This means that the category axis displays groupings of data and not numerical values. That is why the data points of the Line Charts are distributed as evenly-spaced coordinates.

The fundamental differences between the two series types make them suitable solutions for different scenarios. Line Charts are better to use when your project requires you to:

  • Use text labels along the horizontal axis.
  • Use a few numerical labels along the horizontal axis.
  • Use time scales along the horizontal axis.

Line Style

Angular Line charts enable you to render the lines between the points in different styles. To set the appearance of the lines, use the style option, which provides the following available styles:

  • normal—The default style, which produces a straight line between data points.
  • step—The style renders the connection between the data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • smooth—The style causes the Line chart to display a fitted curve through data points. It is suitable for displaying data with a curve and for connecting the points with smooth instead of straight lines.

The following example demonstrates how to use the different types of Angular Line chart line types.

Example
View Source
Change Theme:

Support and Learning Resources

Additional Resources