All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Scatter Series

The Scatter series type visualizes data as a collection of scattered points.

To specify the Scatter series type, assign "scatter" to the series[].type option. You can configure:

  • Each series individually using the series array;
  • All series in the Chart using the commonSeriesSettings object;
  • All Scatter series using the commonSeriesSettings.scatter object.
jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "scatter"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            scatter: { ... }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series type="scatter"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-scatter ... ></dxo-scatter>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Refer to the ScatterSeries section of the API Reference for a full list of options available to a Scatter series.

View Demo

See Also