Google Charts API web components.
See: Documentation
npm i @google-web-components/google-chart<html><head><scripttype="module">import'@google-web-components/google-chart';</script></head><body><google-chartdata='[["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')exportclassNewElementextendsLitElement{render(){returnhtml`<google-chartdata='[["Month", "Days"], ["Jan", 31]]'></google-chart> `;}}import{PolymerElement,html}from'@polymer/polymer';import'@google-web-components/google-chart';classNewElementextendsPolymerElement{staticgettemplate(){returnhtml`<google-chartdata='[["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