Syncfusion Feedback


Overview

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.


Multiple series scatter plot

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.


Custom marker

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 label

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.


Customization

Customize the look and feel of the scatter chart using built-in APIs.


Vue Scatter Chart Code Example

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>

Learning Resources

UG

Scatter Chart User Guide

Learn the available options to customize Vue scatter chart.

API

Scatter Chart API Reference

Explore the Vue scatter chart APIs.


90+ VUE UI COMPONENTS

Scroll up icon