> Markdown version of [Usage with React](https://vaadin.com/docs/next/components/charts/usage-with-react). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Using Charts with React

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

## <a id="column-chart"></a>Column Chart

**React** — `charts-column.tsx`

```tsx
<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>
```

## <a id="area-chart"></a>Area Chart

**React** — `charts-area.tsx`

```tsx
<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>
```

## <a id="pie-chart"></a>Pie Chart

**React** — `charts-pie.tsx`

```tsx
<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>
```

## <a id="polar-chart"></a>Polar Chart

**React** — `charts-polar.tsx`

```tsx
<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>
```

## <a id="gantt-chart"></a>Gantt Chart

**React** — `charts-gantt.tsx`

```tsx
<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>
```