Google Charts API web components.
See: Documentation
npm i @google-web-components/google-chart<html> <head> <script type="module"> import '@google-web-components/google-chart'; </script> </head> <body> <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart> </body> </html>import {LitElement, html} from 'lit'; import {customElement} from 'lit/decorators.js'; import '@google-web-components/google-chart'; @customElement('new-element') export class NewElement extends LitElement { render() { return html` <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart> `; } }import {PolymerElement, html} from '@polymer/polymer'; import '@google-web-components/google-chart'; class NewElement extends PolymerElement { static get template() { return html` <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart> `; } } customElements.define('new-element', NewElement);See examples in the demo or try this live JS bin.
The component has been migrated to LitElement and uses TypeScript now. This migration introduced two breaking changes.
The Polymer-specific selection-changed event commonly used for 2-way bindings has been removed. There were previously two events for observing chart selection changes: google-chart-select and the Polymer-generated selection-changed. For consistency with other events (e.g. google-chart-ready), we keep only google-chart-select.
Polymer components using this feature must be updated to explicitly name the selection event (details). In the example below, note the addition of ::google-chart-select.
- <google-chart selection="{{chartSelection}}"></google-chart> + <google-chart selection="{{chartSelection::google-chart-select}}"></google-chart>LitElement components using the selection-changed event must be updated in a similar fashion:
- <google-chart .selection="${chartSelection}" @selection-changed="${reactToChartSelection}"></google-chart> + <google-chart .selection="${chartSelection}" @google-chart-select="${reactToChartSelection}"></google-chart>Its functionality can be imported from the loader.js module:
import {dataTable, load} from '@google-web-components/google-chart/loader.js';or you may instead choose to use google.visualization.ChartWrapper directly (example).
Instructions for running the tests and demo locally:
git clone https://github.com/GoogleWebComponents/google-chart.git cd google-chart npm installnpm startThe browser will open automatically.
npm test