NgGCharts
Angular 2+ implementation for Google charts
Documentation:
Add google charts
add <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
to your index.html
Install
Install ng-g-charts: npm install ng-g-charts --save
Versions
v0.0.3 -> Angular 5 | v6.0.0 -> Angular 6 | v7.0.0 -> Angular 7 | v8.0.0 -> Angular 8 | v9.0.0 -> Angular 9
Import
Import ChartModule to your app mdule and add it to imports: import { ChartModule } from 'ng-g-charts'; imports: [ ChartModule ],
Tag
Tag to be used is 'ng-g-chart'
It accepts the following inputs:
chart:
This is a mandatory field. You should pass the chart type string. The following values are valid(remember this field is not case sensitive, you can have caps too): piechart, barchart, columnchart, annotationchart, areachart, bubblechart, calendar, candlestickchart, combochart, sankey, scatterchart, steppedareachart, timeline, treemap, wordtree, table.
options:
This is an optionsl field. This takes an object of options as input.
columns:
format -> { type: 'string', id: 'element' } This is the array of columns for google.visualization.DataTable() This is mandatory if you do not input array field. This takes an array of the above formatted objects.
rows:
This is the array of rows for google.visualization.DataTable(); This is mandatory if you do not input array field. This takes an array of arrays as an input. Where each array refers to each row of data.
array:
This is the array of data for google.visualization.arrayToDataTable This is mandatory if you do not input rows and columns. This field is the input for
isMaterial:
NgGCharts supports material charts for bar and column charts. The default value of isMaterial is flase, pass it as true when you need material maps
version:
default value is 'current', you can specify a version number or 'upcoming'
lang:
default is English, if you need to change the value you can pass a valid string
NgGCharts support all the google charts except Diff Chart
Report any issues here -> https://github.com/vpotluri9/ng-g-charts/issues
Happy Coding :)