The Vue scatter chart is used to plot data with two numeric parameters. Also referred to as a scatter plot or point chart, its rich feature set includes tooltip, multiple axes, zooming, and panning.
Plot multiple scatter series in a single chart to compare different data sets. A legend and tooltip for the series can make it more readable.
Use different types of symbols to display the data points in a scatter plot. This will be useful in differentiating multiple series and points in the same chart.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by a given angle.
Customize the look and feel of the scatter chart using built-in APIs.
Easily get started with Vue Scatter using a few simple lines of Vue code, as demonstrated below. Also explore our Vue Scatter Chart Example that shows you how to render and configure the scatter chart component.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='scatter' xName='x' yName='y'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartPlugin, ScatterSeries} from "@syncfusion/ej2-charts";
import { scatterData } from './scatter-data';
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: scatterData.getMaleData,
primaryXAxis: {
valueType: 'Double'
},
};
},
provide: {
chart: [ScatterSeries]
}
};
</script><!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>
