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