- 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
Histogram Chart Colors
Following is an example of a Histogram Chart with custom color.
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 histogram chart with custom color.
Configurations
We've used color configuration to change default color of histogram chart.
options = { legend:'none', colors:['green'] };
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 = 'Students height, in cm'; type = 'Histogram'; data = [ ["1", 80],["2", 55],["3", 68],["4", 80],["5", 54], ["6", 70],["7", 85],["8", 78],["9", 70],["10", 58], ["11", 90],["12", 65],["13", 88],["14", 82],["15", 65], ["16", 86],["17", 45],["18", 62],["19", 84],["20", 75], ["21", 82],["22", 75],["23", 58],["24", 70],["25", 85] ]; columnNames = ["Student Roll No", "height"]; options = { legend:'none', colors:['green'] }; width = 550; height = 400; }
Result
Verify the result.
angular_googlecharts_histogram_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google