Charts
API: TypeScript / Java
Source: TypeScript / Java
Note
|
Commercial feature
A commercial Vaadin subscription is required to use Charts in your project. |
Open in a
new tab
new tab
protected override render() {
return html`
<vaadin-chart
type="column"
.categories="${['Jan', 'Feb', 'Mar']}"
.additionalOptions="${this.columnOptions}"
>
<vaadin-chart-series title="Tokyo" .values="${[49.9, 71.5, 106.4]}"></vaadin-chart-series>
<vaadin-chart-series title="New York" .values="${[83.6, 78.8, 98.5]}"></vaadin-chart-series>
<vaadin-chart-series title="London" .values="${[48.9, 38.8, 39.3]}"></vaadin-chart-series>
</vaadin-chart>
<vaadin-chart
type="area"
stacking="normal"
.categories="${this.months}"
.additionalOptions="${this.areaOptions}"
tooltip
no-legend
>
<vaadin-chart-series
title="United States dollar"
.values="${[135, 125, 89, 124, 105, 81, 111, 94, 95, 129, 98, 84]}"
></vaadin-chart-series>
<vaadin-chart-series
title="Euro"
.values="${[62, 72, 89, 68, 94, 92, 110, 100, 109, 89, 86, 105]}"
></vaadin-chart-series>
<vaadin-chart-series
title="Japanese yen"
.values="${[30, 25, 32, 26, 15, 31, 24, 32, 21, 8, 12, 32]}"
></vaadin-chart-series>
<vaadin-chart-series
title="Poud sterling"
.values="${[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}"
></vaadin-chart-series>
</vaadin-chart>
<vaadin-chart type="pie" tooltip .additionalOptions="${this.pieOptions}">
<vaadin-chart-series title="Brands" .values="${this.pieValues}"></vaadin-chart-series>
</vaadin-chart>
<vaadin-chart polar .additionalOptions="${this.polarOptions}">
<vaadin-chart-series
type="column"
title="Column"
.values="${[8, 7, 6, 5, 4, 3, 2, 1]}"
additional-options='{ "pointPlacement": "between" }'
></vaadin-chart-series>
<vaadin-chart-series type="line" title="Line" .values="${[1, 2, 3, 4, 5, 6, 7, 8]}">
</vaadin-chart-series>
<vaadin-chart-series type="area" title="Area" .values="${[1, 8, 2, 7, 3, 6, 4, 5]}">
</vaadin-chart-series>
</vaadin-chart>
<label>
Theme:
<select @change="${this.changeTheme}">
<option value="">Default</option>
<option value="gradient">Gradient</option>
<option value="monotone">Monotone</option>
<option value="classic">Classic</option>
</select>
</label>
`;