Angular Google Charts - Scatter Chart

Following is an example of a Scatter Chart.

We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Scatter Chart.

Configurations

We've used ScatterChart value to show Scatter chart.

type = ChartType.ScatterChart;

Example - Usage of Scatter Chart

app.ts

import { Component, signal } from '@angular/core';
import { ChartType, GoogleChart } from 'angular-google-charts';

@Component({
   selector: 'app-root',
   imports: [GoogleChart],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('google-charts-app');
   type = ChartType.ScatterChart;
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {
      title:'Age vs Weight'      
   };
   width = 550;
   height = 400;
}

Result

Verify the result.