Angular Scatter Charts
The Ignite UI for Angular Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. These charts draw attention to uneven intervals or clusters of data. They are often used to plot scientific data, and can highlight the deviation of collected data from predicted results. Also, you can use them to organize data chronologically (even if the data is not in chronological order).
60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。
Angular Scatter Marker Chart
Angular Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxScatterSeriesComponent, as shown in the example below:
export class CountryDemographicAfricanItem {
public constructor(init: Partial<CountryDemographicAfricanItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicAfrican extends Array<CountryDemographicAfricanItem> {
public constructor(items: Array<CountryDemographicAfricanItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicAfricanItem(
{
population: 39728000,
birthRate: 23.9,
deathRate: 4.77,
name: `Algeria`
}),
new CountryDemographicAfricanItem(
{
population: 27884000,
birthRate: 42.32,
deathRate: 8.68,
name: `Angola`
}),
new CountryDemographicAfricanItem(
{
population: 10576000,
birthRate: 37.43,
deathRate: 9.32,
name: `Benin`
}),
new CountryDemographicAfricanItem(
{
population: 2121000,
birthRate: 24.14,
deathRate: 7.02,
name: `Botswana`
}),
new CountryDemographicAfricanItem(
{
population: 18111000,
birthRate: 39.44,
deathRate: 8.82,
name: `Burkina Faso`
}),
new CountryDemographicAfricanItem(
{
population: 10160000,
birthRate: 42.66,
deathRate: 11.03,
name: `Burundi`
}),
new CountryDemographicAfricanItem(
{
population: 23298000,
birthRate: 36.84,
deathRate: 10.35,
name: `Cameroon`
}),
new CountryDemographicAfricanItem(
{
population: 525000,
birthRate: 21.14,
deathRate: 5.61,
name: `Cape Verde`
}),
new CountryDemographicAfricanItem(
{
population: 4493000,
birthRate: 36.11,
deathRate: 14.01,
name: `C.A.R.`
}),
new CountryDemographicAfricanItem(
{
population: 14111000,
birthRate: 43.86,
deathRate: 13.22,
name: `Chad`
}),
new CountryDemographicAfricanItem(
{
population: 777000,
birthRate: 33.33,
deathRate: 7.49,
name: `Comoros`
}),
new CountryDemographicAfricanItem(
{
population: 4856000,
birthRate: 35.23,
deathRate: 7.56,
name: `Congo`
}),
new CountryDemographicAfricanItem(
{
population: 23226000,
birthRate: 37.1,
deathRate: 12.54,
name: `Cote Ivoire`
}),
new CountryDemographicAfricanItem(
{
population: 76245000,
birthRate: 42.81,
deathRate: 10.19,
name: `DCongo`
}),
new CountryDemographicAfricanItem(
{
population: 914000,
birthRate: 23.35,
deathRate: 8.37,
name: `Djibouti`
}),
new CountryDemographicAfricanItem(
{
population: 92443000,
birthRate: 27.2,
deathRate: 5.96,
name: `Egypt`
}),
new CountryDemographicAfricanItem(
{
population: 1169000,
birthRate: 34.64,
deathRate: 10.34,
name: `Equatorial Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 3343000,
birthRate: 32.83,
deathRate: 7.07,
name: `Eritrea`
}),
new CountryDemographicAfricanItem(
{
population: 100835000,
birthRate: 32.3,
deathRate: 7,
name: `Ethiopia`
}),
new CountryDemographicAfricanItem(
{
population: 1948000,
birthRate: 30.09,
deathRate: 7.82,
name: `Gabon`
}),
new CountryDemographicAfricanItem(
{
population: 2086000,
birthRate: 39.99,
deathRate: 8.2,
name: `Gambia`
}),
new CountryDemographicAfricanItem(
{
population: 27849000,
birthRate: 31.56,
deathRate: 8.31,
name: `Ghana`
}),
new CountryDemographicAfricanItem(
{
population: 11432000,
birthRate: 36.36,
deathRate: 9.58,
name: `Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 1737000,
birthRate: 37.15,
deathRate: 10.78,
name: `Guinea-Bissau`
}),
new CountryDemographicAfricanItem(
{
population: 47878000,
birthRate: 31.78,
deathRate: 5.84,
name: `Kenya`
}),
new CountryDemographicAfricanItem(
{
population: 2059000,
birthRate: 28.16,
deathRate: 12.92,
name: `Lesotho`
}),
new CountryDemographicAfricanItem(
{
population: 4472000,
birthRate: 34.72,
deathRate: 8.12,
name: `Liberia`
}),
new CountryDemographicAfricanItem(
{
population: 6418000,
birthRate: 20.19,
deathRate: 5.2,
name: `Libya`
}),
new CountryDemographicAfricanItem(
{
population: 24234000,
birthRate: 33.4,
deathRate: 6.48,
name: `Madagascar`
}),
new CountryDemographicAfricanItem(
{
population: 16745000,
birthRate: 37.05,
deathRate: 7.5,
name: `Malawi`
}),
new CountryDemographicAfricanItem(
{
population: 17439000,
birthRate: 43.22,
deathRate: 10.67,
name: `Mali`
}),
new CountryDemographicAfricanItem(
{
population: 4046000,
birthRate: 34.57,
deathRate: 7.96,
name: `Mauritania`
}),
new CountryDemographicAfricanItem(
{
population: 1259000,
birthRate: 10.1,
deathRate: 7.7,
name: `Mauritius`
}),
new CountryDemographicAfricanItem(
{
population: 34664000,
birthRate: 20.4,
deathRate: 5.15,
name: `Morocco`
}),
new CountryDemographicAfricanItem(
{
population: 27042000,
birthRate: 39.36,
deathRate: 10.38,
name: `Mozambique`
}),
new CountryDemographicAfricanItem(
{
population: 2315000,
birthRate: 29.59,
deathRate: 7.46,
name: `Namibia`
}),
new CountryDemographicAfricanItem(
{
population: 20002000,
birthRate: 48.44,
deathRate: 9.94,
name: `Niger`
}),
new CountryDemographicAfricanItem(
{
population: 181136992,
birthRate: 39.37,
deathRate: 12.77,
name: `Nigeria`
}),
new CountryDemographicAfricanItem(
{
population: 11369000,
birthRate: 31.79,
deathRate: 6.13,
name: `Rwanda`
}),
new CountryDemographicAfricanItem(
{
population: 199000,
birthRate: 34.33,
deathRate: 6.81,
name: `Sao Tome and Principe`
}),
new CountryDemographicAfricanItem(
{
population: 14578000,
birthRate: 36.21,
deathRate: 6.07,
name: `Senegal`
}),
new CountryDemographicAfricanItem(
{
population: 95000,
birthRate: 17,
deathRate: 7.5,
name: `Seychelles`
}),
new CountryDemographicAfricanItem(
{
population: 7172000,
birthRate: 35.61,
deathRate: 13.03,
name: `Sierra Leone`
}),
new CountryDemographicAfricanItem(
{
population: 13797000,
birthRate: 43.66,
deathRate: 11.63,
name: `Somalia`
}),
new CountryDemographicAfricanItem(
{
population: 55386000,
birthRate: 21.3,
deathRate: 10.1,
name: `South Africa`
}),
new CountryDemographicAfricanItem(
{
population: 10716000,
birthRate: 36.32,
deathRate: 11.24,
name: `South Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 38903000,
birthRate: 33.32,
deathRate: 7.52,
name: `Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 1104000,
birthRate: 29.27,
deathRate: 9.86,
name: `Swaziland`
}),
new CountryDemographicAfricanItem(
{
population: 51483000,
birthRate: 38.64,
deathRate: 7.02,
name: `Tanzania`
}),
new CountryDemographicAfricanItem(
{
population: 7323000,
birthRate: 34.53,
deathRate: 8.83,
name: `Togo`
}),
new CountryDemographicAfricanItem(
{
population: 11180000,
birthRate: 18.65,
deathRate: 6.36,
name: `Tunisia`
}),
new CountryDemographicAfricanItem(
{
population: 38225000,
birthRate: 42.63,
deathRate: 8.87,
name: `Uganda`
}),
new CountryDemographicAfricanItem(
{
population: 15879000,
birthRate: 38.44,
deathRate: 8,
name: `Zambia`
}),
new CountryDemographicAfricanItem(
{
population: 13815000,
birthRate: 33.94,
deathRate: 8.4,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryDemographicEuropeItem {
public constructor(init: Partial<CountryDemographicEuropeItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicEurope extends Array<CountryDemographicEuropeItem> {
public constructor(items: Array<CountryDemographicEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicEuropeItem(
{
population: 2891000,
birthRate: 11.88,
deathRate: 7.22,
name: `Albania`
}),
new CountryDemographicEuropeItem(
{
population: 8679000,
birthRate: 9.8,
deathRate: 9.6,
name: `Austria`
}),
new CountryDemographicEuropeItem(
{
population: 9439000,
birthRate: 12.5,
deathRate: 12.6,
name: `Belarus`
}),
new CountryDemographicEuropeItem(
{
population: 11288000,
birthRate: 10.8,
deathRate: 9.8,
name: `Belgium`
}),
new CountryDemographicEuropeItem(
{
population: 3429000,
birthRate: 9.12,
deathRate: 10.89,
name: `Bosnia`
}),
new CountryDemographicEuropeItem(
{
population: 7200000,
birthRate: 9.2,
deathRate: 15.3,
name: `Bulgaria`
}),
new CountryDemographicEuropeItem(
{
population: 165000,
birthRate: 9.39,
deathRate: 8.97,
name: `Channel Islands`
}),
new CountryDemographicEuropeItem(
{
population: 4233000,
birthRate: 8.9,
deathRate: 12.9,
name: `Croatia`
}),
new CountryDemographicEuropeItem(
{
population: 1161000,
birthRate: 10.98,
deathRate: 6.84,
name: `Cyprus`
}),
new CountryDemographicEuropeItem(
{
population: 10601000,
birthRate: 10.5,
deathRate: 10.5,
name: `Czechia`
}),
new CountryDemographicEuropeItem(
{
population: 5689000,
birthRate: 10.2,
deathRate: 9.2,
name: `Denmark`
}),
new CountryDemographicEuropeItem(
{
population: 1315000,
birthRate: 10.6,
deathRate: 11.6,
name: `Estonia`
}),
new CountryDemographicEuropeItem(
{
population: 48000,
birthRate: 12.4,
deathRate: 7.7,
name: `Faeroe Islands`
}),
new CountryDemographicEuropeItem(
{
population: 5481000,
birthRate: 10.1,
deathRate: 9.6,
name: `Finland`
}),
new CountryDemographicEuropeItem(
{
population: 64453000,
birthRate: 12,
deathRate: 8.9,
name: `France`
}),
new CountryDemographicEuropeItem(
{
population: 81787000,
birthRate: 9,
deathRate: 11.3,
name: `Germany`
}),
new CountryDemographicEuropeItem(
{
population: 10660000,
birthRate: 8.5,
deathRate: 11.2,
name: `Greece`
}),
new CountryDemographicEuropeItem(
{
population: 9778000,
birthRate: 9.4,
deathRate: 13.4,
name: `Hungary`
}),
new CountryDemographicEuropeItem(
{
population: 330000,
birthRate: 12.5,
deathRate: 6.6,
name: `Iceland`
}),
new CountryDemographicEuropeItem(
{
population: 4652000,
birthRate: 14.1,
deathRate: 6.5,
name: `Ireland`
}),
new CountryDemographicEuropeItem(
{
population: 60578000,
birthRate: 8,
deathRate: 10.7,
name: `Italy`
}),
new CountryDemographicEuropeItem(
{
population: 1998000,
birthRate: 11.1,
deathRate: 14.4,
name: `Latvia`
}),
new CountryDemographicEuropeItem(
{
population: 37000,
birthRate: 8.7,
deathRate: 6.7,
name: `Liechtenstein`
}),
new CountryDemographicEuropeItem(
{
population: 2932000,
birthRate: 10.8,
deathRate: 14.4,
name: `Lithuania`
}),
new CountryDemographicEuropeItem(
{
population: 567000,
birthRate: 10.7,
deathRate: 7,
name: `Luxembourg`
}),
new CountryDemographicEuropeItem(
{
population: 2079000,
birthRate: 11.3,
deathRate: 9.75,
name: `Macedonia`
}),
new CountryDemographicEuropeItem(
{
population: 434000,
birthRate: 10,
deathRate: 8,
name: `Malta`
}),
new CountryDemographicEuropeItem(
{
population: 4071000,
birthRate: 10.52,
deathRate: 11.42,
name: `Moldova`
}),
new CountryDemographicEuropeItem(
{
population: 38000,
birthRate: 8.1,
deathRate: 7.6,
name: `Monaco`
}),
new CountryDemographicEuropeItem(
{
population: 627000,
birthRate: 11.52,
deathRate: 9.8,
name: `Montenegro`
}),
new CountryDemographicEuropeItem(
{
population: 16938000,
birthRate: 10.1,
deathRate: 8.7,
name: `Netherlands`
}),
new CountryDemographicEuropeItem(
{
population: 5200000,
birthRate: 11.3,
deathRate: 7.8,
name: `Norway`
}),
new CountryDemographicEuropeItem(
{
population: 38034000,
birthRate: 9.7,
deathRate: 10.4,
name: `Poland`
}),
new CountryDemographicEuropeItem(
{
population: 10368000,
birthRate: 8.3,
deathRate: 10.5,
name: `Portugal`
}),
new CountryDemographicEuropeItem(
{
population: 19925000,
birthRate: 10,
deathRate: 13.2,
name: `Romania`
}),
new CountryDemographicEuropeItem(
{
population: 144984992,
birthRate: 13.3,
deathRate: 13,
name: `Russia`
}),
new CountryDemographicEuropeItem(
{
population: 33000,
birthRate: 8.2,
deathRate: 7.1,
name: `San Marino`
}),
new CountryDemographicEuropeItem(
{
population: 8877000,
birthRate: 9.3,
deathRate: 14.6,
name: `Serbia`
}),
new CountryDemographicEuropeItem(
{
population: 5436000,
birthRate: 10.3,
deathRate: 9.9,
name: `Slovakia`
}),
new CountryDemographicEuropeItem(
{
population: 2071000,
birthRate: 10,
deathRate: 9.6,
name: `Slovenia`
}),
new CountryDemographicEuropeItem(
{
population: 46672000,
birthRate: 9,
deathRate: 9.1,
name: `Spain`
}),
new CountryDemographicEuropeItem(
{
population: 9765000,
birthRate: 11.7,
deathRate: 9.3,
name: `Sweden`
}),
new CountryDemographicEuropeItem(
{
population: 8297000,
birthRate: 10.5,
deathRate: 8.2,
name: `Switzerland`
}),
new CountryDemographicEuropeItem(
{
population: 44922000,
birthRate: 10.7,
deathRate: 14.9,
name: `Ukraine`
}),
new CountryDemographicEuropeItem(
{
population: 65860000,
birthRate: 11.9,
deathRate: 9.2,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSeriesComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("scatterSeries1", { static: true } )
private scatterSeries1: IgxScatterSeriesComponent
@ViewChild("scatterSeries2", { static: true } )
private scatterSeries2: IgxScatterSeriesComponent
private _countryDemographicEurope: CountryDemographicEurope = null;
public get countryDemographicEurope(): CountryDemographicEurope {
if (this._countryDemographicEurope == null)
{
this._countryDemographicEurope = new CountryDemographicEurope();
}
return this._countryDemographicEurope;
}
private _countryDemographicAfrican: CountryDemographicAfrican = null;
public get countryDemographicAfrican(): CountryDemographicAfrican {
if (this._countryDemographicAfrican == null)
{
this._countryDemographicAfrican = new CountryDemographicAfrican();
}
return this._countryDemographicAfrican;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Population Statistics for Selected Continents
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend">
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Death Rate (per 1,000 people)"
minimumValue="5"
maximumValue="15">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Birth Rate (per 1,000 people)"
minimumValue="0"
maximumValue="50"
interval="10">
</igx-numeric-y-axis>
<igx-scatter-series
name="scatterSeries1"
#scatterSeries1
title="Europe"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
[dataSource]="countryDemographicEurope"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-series>
<igx-scatter-series
name="scatterSeries2"
#scatterSeries2
title="Africa"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="deathRate"
yMemberPath="birthRate"
[dataSource]="countryDemographicAfrican"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Angular Scatter Line Chart
Angular Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxScatterLineSeriesComponent, as shown in the example below:
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterLineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("scatterLineSeries1", { static: true } )
private scatterLineSeries1: IgxScatterLineSeriesComponent
@ViewChild("scatterLineSeries2", { static: true } )
private scatterLineSeries2: IgxScatterLineSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend">
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Life Expectancy (in years)"
minimumValue="72"
maximumValue="84"
interval="2">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Health Expenditure per Capita"
abbreviateLargeNumbers="true"
minimumValue="1000"
maximumValue="6000"
interval="1000">
</igx-numeric-y-axis>
<igx-scatter-line-series
name="ScatterLineSeries1"
#scatterLineSeries1
title="Germany"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForGermany"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-line-series>
<igx-scatter-line-series
name="ScatterLineSeries2"
#scatterLineSeries2
title="France"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForFrance"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-line-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular Scatter Spline Chart
Angular Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxScatterSplineSeriesComponent, as shown in the example below:
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxLegendModule,
IgxNumberAbbreviatorModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxDataChartInteractivityModule,
IgxDataChartAnnotationModule
],
providers: [],
schemas: []
})
export class AppModule {}
tsimport { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxScatterSplineSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit
{
@ViewChild("legend", { static: true } )
private legend: IgxLegendComponent
@ViewChild("chart", { static: true } )
private chart: IgxDataChartComponent
@ViewChild("xAxis", { static: true } )
private xAxis: IgxNumericXAxisComponent
@ViewChild("yAxis", { static: true } )
private yAxis: IgxNumericYAxisComponent
@ViewChild("scatterSplineSeries1", { static: true } )
private scatterSplineSeries1: IgxScatterSplineSeriesComponent
@ViewChild("scatterSplineSeries2", { static: true } )
private scatterSplineSeries2: IgxScatterSplineSeriesComponent
@ViewChild("dataToolTipLayer", { static: true } )
private dataToolTipLayer: IgxDataToolTipLayerComponent
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
public constructor(private _detector: ChangeDetectorRef)
{
}
public ngAfterViewInit(): void
{
}
}
ts<div class="container vertical sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igx-legend
name="legend"
#legend
orientation="Horizontal">
</igx-legend>
</div>
<div class="container fill">
<igx-data-chart
name="chart"
#chart
[legend]="legend">
<igx-numeric-x-axis
name="xAxis"
#xAxis
title="Life Expectancy (in years)"
minimumValue="72"
maximumValue="84"
interval="2">
</igx-numeric-x-axis>
<igx-numeric-y-axis
name="yAxis"
#yAxis
title="Health Expenditure per Capita"
abbreviateLargeNumbers="true"
minimumValue="1000"
maximumValue="6000"
interval="1000">
</igx-numeric-y-axis>
<igx-scatter-spline-series
name="scatterSplineSeries1"
#scatterSplineSeries1
title="Germany"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForGermany"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-spline-series>
<igx-scatter-spline-series
name="scatterSplineSeries2"
#scatterSplineSeries2
title="France"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="lifeExpectancy"
yMemberPath="healthExpense"
[dataSource]="healthDataForFrance"
markerType="Circle"
showDefaultTooltip="true">
</igx-scatter-spline-series>
<igx-data-tool-tip-layer
name="dataToolTipLayer"
#dataToolTipLayer>
</igx-data-tool-tip-layer>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular Scatter High Density Chart
Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxHighDensityScatterSeriesComponent, as shown in the example below:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleDensityData {
public static create(): any[] {
const amount = 25000;
const data: any[] = [];
// generating a lot of data points that spread from specified X/Y center
this.generate(data, amount / 2, 0, 0, 75000, 20000);
this.generate(data, amount / 4, 0, 0, 100000, 25000);
this.generate(data, amount / 8, 0, 0, 150000, 30000);
this.generate(data, amount / 8, 0, 0, 200000, 75000);
return data;
}
public static generate(data: any[], count: number, centerX: number, centerY: number, spreadX: number, spreadY: number): any[] {
for (let i = 0; i <= count; i++) {
let rangeX = Math.random() * spreadX;
let rangeY = Math.random() * spreadY;
const flip = 1;
const prop = Math.random();
if (prop < .25) {
rangeX *= flip;
rangeY *= flip;
} else if (prop >= .25 && prop < .5) {
rangeX *= -flip;
rangeY *= flip;
} else if (prop >= .5 && prop < .75) {
rangeX *= flip;
rangeY *= -flip;
} else {
rangeX *= -flip;
rangeY *= -flip;
}
const dispersionX = Math.random() + 0.12;
const dispersionY = Math.random() + 0.12;
const x = centerX + (rangeX * dispersionX);
const y = centerY + (rangeY * dispersionY);
data.push({ X: x, Y: y });
}
return data;
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleDensityData } from "./SampleDensityData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxDataChartInteractivityModule
],
providers: [SampleDensityData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxHighDensityScatterSeriesComponent } from "igniteui-angular-charts";
import { SampleDensityData } from "./SampleDensityData";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
public data: any[];
constructor() { }
ngOnInit() {
this.data = SampleDensityData.create();
const i = 0;
// const scatterSeries = new IgxHighDensityScatterSeriesComponent();
// scatterSeries.title = "Distribution";
// scatterSeries.dataSource = SampleDensityData.create();
// scatterSeries.showDefaultTooltip = true;
// scatterSeries.xMemberPath = "x";
// scatterSeries.yMemberPath = "y";
// scatterSeries.mouseOverEnabled = true;
// scatterSeries.progressiveLoad = true;
// scatterSeries.heatMinimumColor = "Black";
// scatterSeries.heatMaximumColor = "Yellow";
// scatterSeries.heatMaximum = 1;
// scatterSeries.heatMinimum = 5;
// scatterSeries.resolution = 3;
// scatterSeries.xAxis = this.xAxis;
// scatterSeries.yAxis = this.yAxis;
// this.chart.series.clear();
// this.chart.series.add(scatterSeries);
}
}
ts<div class="container vertical">
<div class="options vertical">
<label id="legendTitle">Stars Distribution in Milky Way Galaxy</label>
</div>
<igx-data-chart #chart
isHorizontalZoomEnabled=true
isVerticalZoomEnabled=true
width="100%"
height="100%">
<igx-numeric-x-axis #xAxis
abbreviateLargeNumbers=true
titleBottomMargin="10"
title="Plane of Rotation (in Light Years)">
</igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis
abbreviateLargeNumbers=true
titleLeftMargin="10"
title="Vertical Plane (in Light Years)">
</igx-numeric-y-axis>
<igx-high-density-scatter-series [xAxis]="xAxis"
[yAxis]="yAxis"
[dataSource]="data"
xMemberPath="X"
yMemberPath="Y"
progressiveLoad=true
heatMinimumColor="Black"
heatMaximumColor="Yellow"
heatMaximum=1
heatMinimum=5
resolution=3>
</igx-high-density-scatter-series>
</igx-data-chart>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular Scatter Area Chart
Angular Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxScatterAreaSeriesComponent, as shown in the example below:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep) {
for (let y = yMin; y <= yMax; y += yStep) {
const z = Math.cos(x) + Math.cos(y);
data.push({ X: x, Y: y, Z: z, Index: index++ });
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10) {
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({ Angle: angle, Radians: radians, SinValue: sin, CosValue: cos, Index: index++ });
}
return data;
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxDataChartInteractivityModule, IgxScatterAreaSeriesModule } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxDataChartInteractivityModule,
IgxScatterAreaSeriesModule
],
providers: [SampleScatterData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { ColorScaleInterpolationMode } from "igniteui-angular-charts";
import { IgxCustomPaletteColorScaleComponent } from "igniteui-angular-charts";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { IgxScatterAreaSeriesComponent } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("series", { static: true })
public series: IgxScatterAreaSeriesComponent;
public data: any[];
public colorScale: IgxCustomPaletteColorScaleComponent;
public seriesScaleMode: string;
public seriesScaleMin: number;
public seriesScaleMax: number;
constructor() {
this.data = SampleScatterData.create();
this.seriesScaleMax = 2;
this.seriesScaleMin = -2;
this.seriesScaleMode = "InterpolateHSV";
}
public ngOnInit() {
this.colorScale = new IgxCustomPaletteColorScaleComponent();
this.colorScale.interpolationMode = ColorScaleInterpolationMode.InterpolateHSV;
this.colorScale.minimumValue = -2;
this.colorScale.maximumValue = 2;
this.colorScale.palette = [
"#8670CB", "#513E8C", "#003F5E",
"#0C6B99", "#4AC4FF", "#B5CC2E",
"#FFD034", "#FC8612", "#ED4840"
];
this.series.colorScale = this.colorScale;
}
public seriesScaleMinChanged(e: any) {
const num: number = e.target.value.toString();
this.colorScale.minimumValue = num;
this.seriesScaleMin = num;
}
public seriesScaleMaxChanged(e: any) {
const num: number = e.target.value.toString();
this.colorScale.maximumValue = num;
this.seriesScaleMax = num;
}
public seriesScaleModeChanged(e: any) {
const mode = e.target.value.toString();
this.colorScale.interpolationMode = mode;
this.seriesScaleMode = mode;
}
}
ts<div class="container vertical">
<div class="options horizontal">
<span class="options-label">Scale Mode: </span>
<select value={{seriesScaleMode}}
(change)="this.seriesScaleModeChanged($event)">
<option>Select</option>
<option>InterpolateRGB</option>
<option>InterpolateHSV</option>
</select>
<label class="options-label">Minimum: </label>
<label class="optionValue" >
{{seriesScaleMin}}
</label>
<input class="slider" type="range" min="-5" max="0" step="1"
value={{seriesScaleMin}}
(change)="this.seriesScaleMinChanged($event)"/>
<label class="options-label">Maximum: </label>
<label class="optionValue" >
{{seriesScaleMax}}
</label>
<input class="slider" type="range" min="0" max="5" step="1"
value={{seriesScaleMax}}
(change)="this.seriesScaleMaxChanged($event)"/>
</div>
<div class="options vertical">
<label id="legendTitle">Distribution of Magnetic Field</label>
</div>
<div class="container">
<igx-data-chart #chart
isHorizontalZoomEnabled="true"
isVerticalZoomEnabled="true"
width="100%"
height="100%"
gridMode="BeforeSeries"
[dataSource]="data">
<!-- primary axes required for scatter-contour-series -->
<igx-numeric-x-axis #xAxis1 labelLocation="OutsideLeft" minimumValue=-180 maximumValue=180 title="Longitude"></igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis1 labelLocation="OutsideBottom" minimumValue=-90 maximumValue=90 title="Latitude"></igx-numeric-y-axis>
<igx-scatter-area-series #series
name="series"
[xAxis]=xAxis1
[yAxis]=yAxis1
xMemberPath="X"
yMemberPath="Y"
colorMemberPath="Z">
</igx-scatter-area-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Angular Scatter Contour Chart
Angular Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxScatterContourSeriesComponent, as shown in the example below:
import { Injectable } from "@angular/core";
@Injectable()
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep) {
for (let y = yMin; y <= yMax; y += yStep) {
const z = Math.cos(x) + Math.cos(y);
data.push({ X: x, Y: y, Z: z, Index: index++ });
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10) {
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({ Angle: angle, Radians: radians, SinValue: sin, CosValue: cos, Index: index++ });
}
return data;
}
}
tsimport { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxLegendModule, IgxScatterContourSeriesModule, IgxScatterAreaSeriesModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxDataChartCoreModule,
IgxDataChartScatterModule,
IgxDataChartScatterCoreModule,
IgxLegendModule,
IgxScatterContourSeriesModule,
IgxScatterAreaSeriesModule,
IgxDataChartInteractivityModule
],
providers: [SampleScatterData],
schemas: []
})
export class AppModule {}
tsimport { Component, OnInit, ViewChild } from "@angular/core";
import { IgxDataChartComponent } from "igniteui-angular-charts";
import { SampleScatterData } from "./SampleScatterData";
import { IgxLinearContourValueResolverComponent } from "igniteui-angular-charts";
import { IgxNumericXAxisComponent } from "igniteui-angular-charts";
import { IgxNumericYAxisComponent } from "igniteui-angular-charts";
import { IgxScatterContourSeriesComponent } from "igniteui-angular-charts";
import { IgxValueBrushScaleComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
public data: any[];
@ViewChild("chart", { static: true })
public chart: IgxDataChartComponent;
@ViewChild("xAxis", { static: true })
public xAxis: IgxNumericXAxisComponent;
@ViewChild("yAxis", { static: true })
public yAxis: IgxNumericYAxisComponent;
public brushScale: IgxValueBrushScaleComponent;
constructor() {
this.data = SampleScatterData.create();
this.brushScale = new IgxValueBrushScaleComponent();
this.brushScale.minimumValue = -2;
this.brushScale.maximumValue = 2;
this.brushScale.brushes = [
"#8670CB", "#513E8C", "#003F5E",
"#0C6B99", "#4AC4FF", "#B5CC2E",
"#FFD034", "#FC8612", "#ED4840"
];
}
public ngOnInit() {
}
}
ts<div class="container vertical">
<div class="options vertical">
<label id="legendTitle">Distribution of Magnetic Field</label>
</div>
<div class="container">
<igx-data-chart #chart
height="100%"
width="100%"
[dataSource]="data"
isHorizontalZoomEnabled=true
isVerticalZoomEnabled=true
gridMode="BeforeSeries">
<!-- primary axes required for scatter-contour-series -->
<igx-numeric-x-axis #xAxis1 labelLocation="OutsideLeft" minimumValue=-180 maximumValue=180 title="Longitude"></igx-numeric-x-axis>
<igx-numeric-y-axis #yAxis1 labelLocation="OutsideBottom" minimumValue=-90 maximumValue=90 title="Latitude"></igx-numeric-y-axis>
<igx-scatter-contour-series
name="series"
[xAxis]="xAxis1"
[yAxis]="yAxis1"
xMemberPath="X"
yMemberPath="Y"
valueMemberPath="Z"
thickness=2
[fillScale]="brushScale">
</igx-scatter-contour-series>
</igx-data-chart>
</div>
</div>
html/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scss
Additional Resources
You can find more information about related chart types in these topics:
API References
The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
|---|---|---|
| Scatter Marker | IgxDataChartComponent |
IgxScatterSeriesComponent |
| Scatter Line | IgxDataChartComponent |
IgxScatterLineSeriesComponent |
| Scatter Spline | IgxDataChartComponent |
IgxScatterSplineSeriesComponent |
| High Density Scatter | IgxDataChartComponent |
IgxHighDensityScatterSeriesComponent |
| Scatter Area | IgxDataChartComponent |
IgxScatterAreaSeriesComponent |
| Scatter Contour | IgxDataChartComponent |
IgxScatterContourSeriesComponent |
GitHub