- 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
Customized Sankey Chart
Following is an example of a Customized SanKey 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 Customized SanKey Chart.
Configurations
We've used Sankey options to customize Sankey chart.
options = { sankey: { link:{ color:{ stroke:'black', strokeWidth:1 } } } };
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] ]; columnNames = ['From', 'To','Weight']; options = { sankey: { link:{ color:{ stroke:'black', strokeWidth:1 } } } }; width = 550; height = 400; }
Result
Verify the result.
angular_googlecharts_sankey_charts.htm
Advertisements