Angular Multi Series Scatter Chart

Download Angular Chart Samples

Example shows Angular Multi Series Scatter Chart with different marker types for each dataseries.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chartOptions = {
    animationEnabled: true,
    exportEnabled: true,
    theme: "dark2",
    title: {
      text: "Server CPU Utilization vs Active Users"
    },
    axisX: {
      title: "Active Users"
    },
    axisY: {
      title: "CPU Utilization",
      suffix: "%"
    },
    legend: {
      cursor: "pointer",
      itemclick: function(e:any) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
                  e.dataSeries.visible = false;
            } else {
                  e.dataSeries.visible = true;
            }
            e.chart.render();
      }
    },
    data: [{
      type: "scatter",
      name: "Server 1",
      markerType: "cross",
      yValueFormatString: "##.## %",
      showInLegend: true,
      toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span><br>Active Users: {x}<br>CPU Utilization: {y}",
      dataPoints: [
        { x: 100, y: 10 },
        { x: 110, y: 15 },
        { x: 130, y: 17 },
        { x: 140, y: 19 },
        { x: 145, y: 21 },
        { x: 400, y: 25 },
        { x: 430, y: 27 },
        { x: 444, y: 30 },
        { x: 460, y: 29 },
        { x: 490, y: 35 },
        { x: 500, y: 40 },
        { x: 510, y: 50 },
        { x: 600, y: 30 },
        { x: 700, y: 35 },
        { x: 800, y: 40 },
        { x: 900, y: 45 },
        { x: 1000, y: 47 },
        { x: 1200, y: 55 },
        { x: 1230, y: 51 },
        { x: 1300, y: 60 },
        { x: 1330, y: 65 },
        { x: 1400, y: 70 },
        { x: 1450, y: 71 },
        { x: 1500, y: 69 },
        { x: 1530, y: 75 },
        { x: 1590, y: 79 },
        { x: 1600, y: 62 },
        { x: 1620, y: 80 },
        { x: 1640, y: 85 },
        { x: 1700, y: 81 },
        { x: 1790, y: 89 },
        { x: 1800, y: 91 },
        { x: 1950, y: 93 },
        { x: 1980, y: 88 },
        { x: 2000, y: 90 }
      ]
    },
    {
      type: "scatter",
      name: "Server 2",
      showInLegend: true,
      markerType: "square",
      toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span><br>Active Users: {x}<br>CPU Utilization: {y}%",
      dataPoints: [
        { x: 100, y: 25 },
        { x: 110, y: 35 },
        { x: 130, y: 35 },
        { x: 140, y: 40 },
        { x: 145, y: 45 },
        { x: 400, y: 42 },
        { x: 430, y: 32 },
        { x: 444, y: 35 },
        { x: 460, y: 43 },
        { x: 490, y: 50 },
        { x: 500, y: 57 },
        { x: 510, y: 67 },
        { x: 600, y: 40 },
        { x: 700, y: 46 },
        { x: 800, y: 50 },
        { x: 900, y: 60 },
        { x: 1000, y: 66 },
        { x: 1200, y: 79 },
        { x: 1230, y: 60 },
        { x: 1300, y: 75 },
        { x: 1330, y: 80 },
        { x: 1400, y: 82 },
        { x: 1450, y: 88 },
        { x: 1500, y: 87 },
        { x: 1530, y: 88 },
        { x: 1590, y: 90 },
        { x: 1600, y: 80 },
        { x: 1620, y: 93 },
        { x: 1640, y: 91 },
        { x: 1700, y: 92 },
        { x: 1790, y: 93 },
        { x: 1800, y: 90 },
        { x: 1950, y: 91 },
        { x: 1980, y: 93 },
        { x: 2000, y: 95 }
      ]
    }]
  }	
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

markerType property can be used to change the the type of marker. Some other commonly used customization options include color, markerSize, etc.

Note   For step by step instructions, follow our Angular Integration Tutorial