A Chord Series visualises movement or change between different items, using nodes and links.
Simple Chord Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgChartOptions,
AnimationModule,
ChordSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
ChordSeriesModule,
CrosshairModule,
LegendModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
title: {
text: "Global Migrations between Continents",
},
subtitle: {
text: "2023",
},
data: [
{ from: "Asia", to: "Europe", size: 20 },
{ from: "Asia", to: "Americas", size: 19 },
{ from: "Asia", to: "Africa", size: 4 },
{ from: "Asia", to: "Oceania", size: 8 },
{ from: "Europe", to: "Asia", size: 5 },
{ from: "Europe", to: "Americas", size: 5 },
{ from: "Europe", to: "Africa", size: 3 },
{ from: "Europe", to: "Oceania", size: 2 },
{ from: "Americas", to: "Asia", size: 4 },
{ from: "Americas", to: "Europe", size: 5 },
{ from: "Americas", to: "Africa", size: 11 },
{ from: "Americas", to: "Oceania", size: 6 },
{ from: "Africa", to: "Asia", size: 3 },
{ from: "Africa", to: "Europe", size: 9 },
{ from: "Africa", to: "Americas", size: 3 },
{ from: "Oceania", to: "Asia", size: 1 },
{ from: "Oceania", to: "Europe", size: 1 },
{ from: "Oceania", to: "Americas", size: 1 },
],
series: [
{
type: "chord",
fromKey: "from",
toKey: "to",
sizeKey: "size",
sizeName: "Migration (millions)",
},
],
};
}
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
To create a Chord Series, use the chord series type.
{
series: [
{
type: 'chord',
fromKey: 'from',
toKey: 'to',
sizeKey: 'size',
},
],
}In this configuration:
fromKeydefines the start node of each link.toKeydefines the end node of each link.sizeKeydefines the size of each link.
Customisation Copy Link
Node Style Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgChartOptions,
AnimationModule,
ChordSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
ChordSeriesModule,
CrosshairModule,
LegendModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
title: {
text: "Global Migrations between Continents",
},
subtitle: {
text: "2023",
},
data: [
{ from: "Asia", to: "Europe", size: 20 },
{ from: "Asia", to: "Americas", size: 19 },
{ from: "Asia", to: "Africa", size: 4 },
{ from: "Asia", to: "Oceania", size: 8 },
{ from: "Europe", to: "Asia", size: 5 },
{ from: "Europe", to: "Americas", size: 5 },
{ from: "Europe", to: "Africa", size: 3 },
{ from: "Europe", to: "Oceania", size: 2 },
{ from: "Americas", to: "Asia", size: 4 },
{ from: "Americas", to: "Europe", size: 5 },
{ from: "Americas", to: "Africa", size: 11 },
{ from: "Americas", to: "Oceania", size: 6 },
{ from: "Africa", to: "Asia", size: 3 },
{ from: "Africa", to: "Europe", size: 9 },
{ from: "Africa", to: "Americas", size: 3 },
{ from: "Oceania", to: "Asia", size: 1 },
{ from: "Oceania", to: "Europe", size: 1 },
{ from: "Oceania", to: "Americas", size: 1 },
],
series: [
{
type: "chord",
fromKey: "from",
toKey: "to",
sizeKey: "size",
sizeName: "Migration (millions)",
node: {
fill: "#34495e",
stroke: "#2c3e50",
strokeWidth: 2,
},
},
],
};
}
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
The styling of all nodes can be customised using the node property.
{
series: [
{
type: 'chord',
fromKey: 'from',
toKey: 'to',
sizeKey: 'size',
node: {
fill: '#34495e',
stroke: '#2c3e50',
strokeWidth: 2,
},
},
],
} Link Style Copy Link
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgChartOptions,
AnimationModule,
ChordSeriesModule,
ContextMenuModule,
CrosshairModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
ChordSeriesModule,
CrosshairModule,
LegendModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
title: {
text: "Global Migrations between Continents",
},
subtitle: {
text: "2023",
},
data: [
{ from: "Asia", to: "Europe", size: 20 },
{ from: "Asia", to: "Americas", size: 19 },
{ from: "Asia", to: "Africa", size: 4 },
{ from: "Asia", to: "Oceania", size: 8 },
{ from: "Europe", to: "Asia", size: 5 },
{ from: "Europe", to: "Americas", size: 5 },
{ from: "Europe", to: "Africa", size: 3 },
{ from: "Europe", to: "Oceania", size: 2 },
{ from: "Americas", to: "Asia", size: 4 },
{ from: "Americas", to: "Europe", size: 5 },
{ from: "Americas", to: "Africa", size: 11 },
{ from: "Americas", to: "Oceania", size: 6 },
{ from: "Africa", to: "Asia", size: 3 },
{ from: "Africa", to: "Europe", size: 9 },
{ from: "Africa", to: "Americas", size: 3 },
{ from: "Oceania", to: "Asia", size: 1 },
{ from: "Oceania", to: "Europe", size: 1 },
{ from: "Oceania", to: "Americas", size: 1 },
],
series: [
{
type: "chord",
fromKey: "from",
toKey: "to",
sizeKey: "size",
sizeName: "Migration (millions)",
link: {
fill: "#34495e",
fillOpacity: 0.25,
stroke: "#2c3e50",
strokeWidth: 1,
strokeOpacity: 0.25,
},
},
],
};
}
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
The styling of all links can be customised using the link property.
{
series: [
{
type: 'chord',
fromKey: 'from',
toKey: 'to',
sizeKey: 'size',
link: {
fill: '#34495e',
fillOpacity: 0.25,
stroke: '#2c3e50',
strokeWidth: 1,
strokeOpacity: 0.25,
},
},
],
}