Google Charts - Google Charts tutorial - Basic Bar Chart - chart js - google graphs - google charts examples
A bar chart that is rendered as an image using the Google Charts API.
The google.charts.load package name is "imagebarchart"
The visualization's class name is google.visualization.ImageBarChart
Let's chart the densities of four precious metals:
Learn Googlecharts - Googlecharts tutorial - basic bar chart coloring bars in google charts - Googlecharts examples - Googlecharts programs
- Above, all colors are the default blue. That's because they're all part of the same series; if there were a second series, that would have been colored red.
- We can customize these colors with the style role:
Learn Googlecharts - Googlecharts tutorial - basic bar chart customizing bars in googlecharts - Googlecharts examples - Googlecharts programs
There are three different ways to choose the colors, and our data table showcases them all: RGB values, English color names, and a CSS-like declaration:
The style role lets you control several aspects of bar appearance with CSS-like declarations:
Learn Googlecharts - Googlecharts tutorial - bar styles in basic bar chart in google chart - Googlecharts examples - Googlecharts programs
- We don't recommend that you mix styles too freely inside a chart-pick a style and stick with it-but to demonstrate all the style attributes, here's a sampler:
- The first two bars each use a specific color (the first with an English name, the second with an RGB value).
- No opacity was chosen, so the default of 1.0 (fully opaque) is used; that's why the second bar obscures the gridline behind it. In the third bar, an opacity of 0.2 is used, revealing the gridline.
- In the fourth bar, three style attributes are used: stroke-color and stroke-width to draw the border, and fill-color to specify the color of the rectangle inside.
- The rightmost bar additionally uses stroke-opacity and fill-opacity to choose opacities for the border and fill: