Docs

Documentation versions (currently viewingVaadin 24)

Usage with React

Examples of using Charts with React

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

Column Chart

Open in a
new tab
<Chart title="Column Chart" type="column" categories={['Jan', 'Feb', 'Mar']}>
  <ChartSeries title="Tokyo" values={[49.9, 71.5, 106.4]} />
  <ChartSeries title="New York" values={[83.6, 78.8, 98.5]} />
  <ChartSeries title="London" values={[48.9, 38.8, 39.3]} />
</Chart>

Area Chart

Open in a
new tab
<Chart
  type="area"
  title="Area Chart"
  stacking="normal"
  categories={'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')}
>
  <ChartSeries
    title="United States dollar"
    values={[135, 125, 89, 124, 105, 81, 111, 94, 95, 129, 98, 84]}
  />
  <ChartSeries title="Euro" values={[62, 72, 89, 68, 94, 92, 110, 100, 109, 89, 86, 105]} />
  <ChartSeries title="Japanese yen" values={[30, 25, 32, 26, 15, 31, 24, 32, 21, 8, 12, 32]} />
  <ChartSeries
    title="Pound sterling"
    values={[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}
  />
</Chart>

Pie Chart

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

Polar Chart

Open in a
new tab
<Chart polar title="Polar Chart">
  <ChartSeries type="column" title="Column" values={[8, 7, 6, 5, 4, 3, 2, 1]} />
  <ChartSeries type="line" title="Line" values={[1, 2, 3, 4, 5, 6, 7, 8]} />
  <ChartSeries type="area" title="Area" values={[1, 8, 2, 7, 3, 6, 4, 5]} />
</Chart>