Charts

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

Topics

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. Start Free Trial See Pricing

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.

Docs

Docs

Charts

Topics