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 install
npm start
The browser will open automatically.
npm test