All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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 property. 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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries type="scatter"/>
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings :scatter="scatterSettings"/>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    },
    data() {
        return {
            scatterSettings: { ... }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const scatterSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series type="scatter" />
                <Series ... />
                ...
                <CommonSeriesSettings scatter={scatterSettings} />
            </Chart>
        );
    }
}

export default App;

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

View Demo

See Also