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

Angular Line and Vertical Line Charts

Updated on Dec 12, 2025

Line charts and Vertical Line charts are categorical charts that display continuous data as lines passing through points defined by item values. They are useful for rendering trends over time or at equal intervals and for comparing sets of similar data.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Line chart series to an array through the data property in three formats:

Binding to numbers—Use a simple array of numeric values where each number represents a data point value. The chart auto-generates categories.
ts
```
public data: number[] = [10, 25, 15, 30, 20];
```
Binding to arrays—Use arrays of [value, category] pairs where the first element is the data point value and the second element is the category name.
ts
```
public data: [number, string][] = [[10, 'Jan'], [25, 'Feb'], [15, 'Mar']];
```

Binding to objects—Use an array of objects with custom properties.

public data: Array<{ value: number; category: string }> = [
    { value: 10, category: 'Jan' },
    { value: 25, category: 'Feb' },
    { value: 15, category: 'Mar' }
];

When binding to objects, specify which properties contain the data through the following field mappings:

Property	Data type	Required	Description
`field`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.

The following example demonstrates how to bind the Line chart series to data using object models.

Change Theme

Theme

Loading ...

Vertical Line Charts

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

Change Theme

Theme

Loading ...

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. Angular 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 Angular Line Chart example demonstrates how to use the different line types of the chart.

Change Theme

Theme

Loading ...

Angular Line and Vertical Line Charts

Binding to Data

Vertical Line Charts

Choosing Between Line or Scatter Line Charts

Line Style

Support and Learning Resources

Additional Resources