- Angular Google Charts Tutorial
- Home
- Overview
- Environment Setup
- Configuration Syntax
- Area Charts
- Bar Charts
- Bubble Charts
- Candlestick
- Column Charts
- Combination
- Histogram
- Line Charts
- Maps
- Organization
- Pie Charts
- Sankey Charts
- Scatter Chart
- Stepped Area
- Table Chart
- TreeMap Chart
- Angular Google Charts Resources
- Quick Guide
- Resources
- Discussion
Sankey Charts with Multiple levels
Following is an example of a SanKey Chart with multiple levels.
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 SanKey Chart with multiple levels.
Configurations
We've used Sankey class to show a Sankey chart with multiple levels.
type = 'Sankey';
Example
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = ''; type = 'Sankey'; data = [ ["Brazil","Portugal",5], ["Brazil","France",1], ["Brazil","Spain",1], ["Brazil","England",1], ["Canada","Portugal",1], ["Canada","France",5], ["Canada","England",1], ["Mexico","Portugal",1], ["Mexico","France",1], ["Mexico","Spain",5], ["Mexico","England",1], ["USA","Portugal",1], ["USA","France",1], ["USA","Spain",1], ["USA","England",5], ["Portugal","Angola",2], ["Portugal","Senagal",1], ["Portugal","Morocco",1], ["Portugal","South Africa",3] ]; columnNames = ['From', 'To','Weight']; options = { }; width = 550; height = 400; }
Result
Verify the result.
angular_googlecharts_sankey_charts.htm
Advertisements