Documentation

Documentation versions (currently viewingVaadin 24.4 (pre))

Usage with Lit

Examples of using Charts with Lit.

The sections that follow provide examples of certain Chart types with Lit.

Column Chart

Open in a
new tab
<vaadin-chart title="Column Chart" type="column" .categories="${['Jan', 'Feb', 'Mar']}">
  <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>

Area Chart

Open in a
new tab
<vaadin-chart
  type="area"
  title="Area Chart"
  stacking="normal"
  .categories="${'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')}"
>
  <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="Pound sterling"
    .values="${[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}"
  ></vaadin-chart-series>
</vaadin-chart>

Pie Chart

Open in a
new tab
<vaadin-chart type="pie" title="Pie Chart" tooltip>
  <vaadin-chart-series
    title="Brands"
    .values="${[
      { name: 'Chrome', y: 38 },
      { name: 'Firefox', y: 24 },
      { name: 'Edge', y: 15, sliced: true, selected: true },
      { name: 'Internet Explorer', y: 8 },
    ]}"
  ></vaadin-chart-series>
</vaadin-chart>

Polar Chart

Open in a
new tab
<vaadin-chart polar title="Polar Chart">
  <vaadin-chart-series
    type="column"
    title="Column"
    .values="${[8, 7, 6, 5, 4, 3, 2, 1]}"
  ></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>