Following is an example of a basic scatter chart.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a basic scatter chart is given below.

Configurations

Let us now see the additional configurations/steps taken.

series

Configure the chart type to be scatter based. series.type decides the series type for the chart. Here, the default value is “line”.

var chart = {
   type: ''scatter'',
   zoomType: ''xy''
};  

Example

app.component.ts

import { Component } from ''@angular/core'';
import * as Highcharts from ''highcharts'';
@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css'']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: ''Scatter plot''   
      },      
      series : [{
         type: ''scatter'',
         zoomType:''xy'',
         name: ''Browser share'',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

Result

Verify the result.