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.
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.
Vertical Line Chart
The following example demonstrates the Angular Vertical Line chart in action.
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.
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.
Support and Learning Resources
- Line and Vertical Line Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Area Charts
- Bar Charts
- Box Plot Charts
- Bullet Charts
- Radar Charts
- RangeArea Charts
- RangeBar Charts
- Waterfall Charts
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base