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

Angular Scatter and Scatter Line Charts

Updated on Dec 12, 2025

Scatter Plot and Scatter Line charts are variations of scatter charts suitable for displaying numerical data over two independent axes—X and Y.

The following example demonstrates the Angular Scatter Chart in action.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Scatter chart series to an array through the data property in two formats:

Binding to arrays—Use arrays of [X, Y] pairs where the first element is the X coordinate and the second element is the Y coordinate.
ts
```
public data: [number, number][] = [[10, 20], [15, 30], [25, 15]];
```

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

public data: Array<{ x: number; y: number }> = [
    { x: 10, y: 20 },
    { x: 15, y: 30 },
    { x: 25, y: 15 }
];

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

Property	Data type	Required	Description
`xField`	`string`	Yes*	The property name that contains the X coordinate with `number` or `date` values (*required when binding to objects).
`yField`	`string`	Yes*	The property name that contains the Y coordinate with `number` values (*required when binding to objects).
`xAxis`	`string`	No	The name of the X axis to use.
`yAxis`	`string`	No	The name of the Y axis to use.

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

Change Theme

Theme

Loading ...

Scatter Line Charts

Scatter Line charts display connecting lines between the data points they render. Scatter Line charts are functionally equivalent to Scatter Plot charts.

Change Theme

Theme

Loading ...

Choosing Between Line or Scatter Line Charts

Scatter Line charts and 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 Angular Scatter charts, both the vertical and the horizontal axis are value axes. This means that they render numerical values and not groupings of data, and are capable of displaying data at the intersection of each X- and Y-axis value. That is why the data points the Scatter Line Charts display might be distributed as both evenly-spaced or unevenly-spaced coordinates.

The fundamental differences between the two series types make each a more suitable solution in particular scenarios. Angular Scatter Charts are better to use when your project requires you to:

Modify the scale of the horizontal axis.
Apply logarithms to scale the horizontal axis.
Display worksheet data that includes grouped sets of values.
Display patterns in large sets of data.
Compare large numbers of data points with no regard to time.

Line Style

Scatter 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 of the Angular Scatter Line Chart, which provides the following available styles:

normal—The default style which produces a straight line between data points.
smooth—The style causes the Scatter 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 Scatter Chart example demonstrates how to use the different types of lines.

Change Theme

Theme

Loading ...

Angular Scatter and Scatter Line Charts

Binding to Data

Scatter Line Charts

Choosing Between Line or Scatter Line Charts

Line Style

Support and Learning Resources

Additional Resources