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.
See Also
Feedback