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

Angular Line and Vertical Line Charts

Updated on Jan 20, 2026

Line charts and Vertical Line charts are categorical charts that display continuous data as lines passing through points defined by item values. Use Line charts to render trends over time or at equal intervals and compare 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 are a variation of Line charts where the vertical axis represents categories and the horizontal axis represents values. Use Vertical Line charts to compare values across different categories when the category names are long or when you have many categories to display.

To create a Vertical Line chart, set the series type to verticalLine using the type option.

The following example demonstrates a Vertical Line chart.

Change Theme

Theme

Loading ...

Line Style and Dash Type

Customize the appearance of lines between data points using the style property to set the connection style and the dashType property to set the line pattern.

The style property supports normal (default, straight lines), step (vertical and horizontal lines), and smooth (fitted curves with smooth transitions).

The dashType property supports solid (default, continuous line), dash, dot, dashDot, longDash, longDashDot, and longDashDotDot for various repeating patterns.

The following example demonstrates how to customize the Line chart by applying different line styles and dash types.

Change Theme

Theme

Loading ...

Difference Between Line and Scatter Line Charts

Line charts and Scatter Line charts look visually similar because both connect data points with lines. However, Line charts use a category axis horizontally (displaying evenly-spaced groupings) while Scatter Line charts use a value axis (displaying continuous numerical values on both axes).

Use Line charts when you need text labels, a few numerical labels, or time-based data along the horizontal axis. For continuous numerical data on both axes, use Scatter Line charts instead.

Angular Line and Vertical Line Charts

Binding to Data

Vertical Line Charts

Line Style and Dash Type

Difference Between Line and Scatter Line Charts

Support and Learning Resources

Additional Resources