Docs

Documentation versions (currently viewingVaadin 24)

Charts

Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting.

Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting. Interaction with the vector graphics is animated and they render crisply on any device.

Note
Commercial feature

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

Open in a
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>
  `;

Topics

Installing Charts for Vaadin Flow
How to install Charts in a project.
Basic Use
The basic use of charts in a view.
Chart Types
A list of chart types available and information on using and configuring them.
Chart Configuration
How to configure the various types of charts.
Chart Styling
How to style a chart with CSS in your project.
Chart Data
Explains the storage and use of chart data.
Migrating from Earlier Versions
Information on migrating chart components from earlier versions of Vaadin.
Timeline
How to add the ability to select different time ranges for charts.
Exporting Charts as SVG
How to export charts to SVG format.
Usage with React
Examples of using Charts with React
Usage with Lit
Examples of using Charts with Lit.