Angular 2+ implementation for Google charts
add <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> to your index.html
Install ng-g-charts: npm install ng-g-charts --save
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 ChartModule to your app mdule and add it to imports: import { ChartModule } from 'ng-g-charts'; imports: [ ChartModule ],
Tag to be used is 'ng-g-chart'
It accepts the following inputs:
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.
This is an optionsl field. This takes an object of options as input.
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.
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.
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
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
default value is 'current', you can specify a version number or 'upcoming'
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 :)