Documentation

Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Charts

Note
Commercial feature

A commercial Vaadin subscription is required to use Charts in your project.

Open in a
new tab
Source code
charts-overview.ts
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> `;
charts-overview.ts