All Components

Scatter

Scatter Plot and Scatter Line Charts are the two main variations of scatter charts and are suitable for displaying numerical data.

Scatter Plot Charts render the data over two independent axes—X and Y.

Scatter Line Charts are functionally equivalent to the Scatter Plot Charts, but they display connecting lines between the data points.

Basic Usage

The following example demonstrates the Scatter Plot Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Rainfall - Wind Speed' }">
      <kendo-chart-series>
        <kendo-chart-series-item type="scatter"
                                 [data]="weatherData"
                                 xField="rainfall" yField="windSpeed">
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-x-axis>
          <kendo-chart-x-axis-item [title]="{ text: 'Wind Speed [km/h]' }">
          </kendo-chart-x-axis-item>
      </kendo-chart-x-axis>
      <kendo-chart-y-axis>
          <kendo-chart-y-axis-item [title]="{ text: 'Rainfall [mm]' }">
          </kendo-chart-y-axis-item>
      </kendo-chart-y-axis>
    </kendo-chart>
  `
})
export class AppComponent {
  public weatherData = [
    { windSpeed: 16.4, rainfall: 5.4 },
    { windSpeed: 21.7, rainfall: 2 },
    { windSpeed: 25.4, rainfall: 3 },
    { windSpeed: 19, rainfall: 2 },
    { windSpeed: 10.9, rainfall: 1 },
    { windSpeed: 13.6, rainfall: 3.2 },
    { windSpeed: 10.9, rainfall: 7.4 },
    { windSpeed: 10.9, rainfall: 0 },
    { windSpeed: 10.9, rainfall: 8.2 },
    { windSpeed: 16.4, rainfall: 0 },
    { windSpeed: 16.4, rainfall: 1.8 },
    { windSpeed: 13.6, rainfall: 0.3 },
    { windSpeed: 29.9, rainfall: 0 },
    { windSpeed: 27.1, rainfall: 2.3 },
    { windSpeed: 16.4, rainfall: 0 },
  ];
}

The following example demonstrates the Scatter Line Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Charge current vs. charge time' }">
      <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let series of chargeData;"
                                 type="scatterLine"
                                 name="{{ series.current }}C"
                                 [data]="series.stats"
                                 xField="time" yField="charge">

        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-x-axis>
          <kendo-chart-x-axis-item [title]="{ text: 'Time' }"
                                   [labels]="{ format: '{0}m' }"
                                   [max]="90">
          </kendo-chart-x-axis-item>
      </kendo-chart-x-axis>
      <kendo-chart-y-axis>
          <kendo-chart-y-axis-item [title]="{ text: 'Charge' }"
                                   [labels]="{ format: '{0}%' }"
                                   [max]="100">
          </kendo-chart-y-axis-item>
      </kendo-chart-y-axis>
      <kendo-chart-tooltip format="{1}% in {0} minutes">
      </kendo-chart-tooltip>
    </kendo-chart>
  `
})
export class AppComponent {
  public chargeData = [{
    current: 0.8,
    stats: [
      { time: 10, charge: 10 },
      { time: 15, charge: 20 },
      { time: 20, charge: 25 },
      { time: 32, charge: 40 },
      { time: 43, charge: 50 },
      { time: 55, charge: 60 },
      { time: 60, charge: 70 },
      { time: 70, charge: 80 },
      { time: 90, charge: 100 }
    ]
  }, {
    current: 1.6,
    stats: [
      { time: 10, charge: 40 },
      { time: 17, charge: 50 },
      { time: 18, charge: 70 },
      { time: 35, charge: 90 },
      { time: 47, charge: 95 },
      { time: 60, charge: 100 }
    ]
  }, {
    current: 3.2,
    stats: [
      { time: 10, charge: 70 },
      { time: 13, charge: 90 },
      { time: 25, charge: 100 }
    ]
  }];
}

Selecting Scatter over 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 differ significantly in the way each series type plots the data it presents in the plot area.

In 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-axis 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. Scatter Charts need to be used 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.
In this article