Syncfusion Feedback


Vue Charts Scatter Chart

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.

  1. <template>
  2.     <div id="app">
  3.          <ejs-chart id="container" :primaryXAxis='primaryXAxis'>
  4.             <e-series-collection>
  5.                 <e-series :dataSource='seriesData' type='scatter' xName='x' yName='y'> </e-series>
  6.             </e-series-collection>
  7.         </ejs-chart>
  8.     </div>
  9. </template>
  10. <script>
  11. import { ChartPlugin, ScatterSeries} from "@syncfusion/ej2-charts";
  12. import { scatterData } from './scatter-data';
  13. Vue.use(ChartPlugin);
  14. export default {
  15.   data() {
  16.     return {
  17.       seriesData: scatterData.getMaleData,
  18.               primaryXAxis: {
  19.                 valueType: 'Double'
  20.         },
  21.     };
  22.   },
  23.   provide: {
  24.        chart: [ScatterSeries]
  25.   }
  26. };
  27. </script>
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <body>
  5.      <div id="app"></div>
  6. </body>
  7.  
  8. </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
Chat with us