Docs

Docs

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>

Gantt Chart

Open in a
new tab
<Chart
  type="gantt"
  title="Gantt Chart"
  additionalOptions={{
    xAxis: {
      min: 1416182400000,
      max: 1417305600000,
    },
    yAxis: {
      categories: ['Start prototype', 'Test prototype', 'Develop', 'Run acceptance tests'],
    },
  }}>
  <ChartSeries values={[
    {
      y: 0,
      start: 1416268800000,
      end: 1416873600000,
      custom: {
        assignee: 'John',
      },
      completed: 0.33,
    },
    {
      y: 1,
      start: 1417046400000,
      end: 1417219200000,
      custom: {
        assignee: 'William',
      },
    },
    {
      y: 2,
      start: 1416441600000,
      end: 1416873600000,
      custom: {
        assignee: 'Jane',
      },
      completed: 0.4,
    },
    {
      y: 2,
      start: 1417046400000,
      end: 1417219200000,
      custom: {
        assignee: 'Jane',
      },
    },
    {
      y: 3,
      start: 1416700800000,
      end: 1416960000000,
      custom: {
        assignee: 'John',
      },
      completed: 0.25,
    },
  ]}

  additionalOptions={{
    type: 'gantt',
    dataLabels: [{
      enabled: true,
      format: '<div>{point.custom.assignee}</vaadin-avatar>',
      useHTML: true,
      align: 'right',
    }],
  }}/>
</Chart>