> Markdown version of [Charts](https://vaadin.com/docs/next/components/charts). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.overview"></a>Charts

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](https://vaadin.com/trial)
>
> - [See Pricing](https://vaadin.com/pricing)

**Lit** — `charts-overview.ts`

```typescript
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
    >
      <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>
  `;
```

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

```tsx
<Chart
  style={chartStyle}
  type="column"
  categories={['Jan', 'Feb', 'Mar']}
  additionalOptions={columnOptions}
>
  <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>

<Chart
  type="area"
  stacking="normal"
  style={chartStyle}
  categories={months}
  additionalOptions={areaOptions}
>
  <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="Poud sterling"
    values={[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}
  />
</Chart>

<Chart style={chartStyle} type="pie" tooltip additionalOptions={pieOptions}>
  <ChartSeries title="Brands" values={pieValues} />
</Chart>

<Chart style={chartStyle} polar additionalOptions={polarOptions}>
  <ChartSeries
    type="column"
    title="Column"
    values={[8, 7, 6, 5, 4, 3, 2, 1]}
    additionalOptions={seriesOptions}
  />
  <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="topics"></a>Topics

- [Basic Use](https://vaadin.com/docs/next/components/charts/basic-use.md): The basic use of charts in a view.
- [Chart Types](https://vaadin.com/docs/next/components/charts/charttypes.md): A list of chart types available with information on using and configuring them.
- [Chart Configuration](https://vaadin.com/docs/next/components/charts/configuration.md): How to configure the various types of charts.
- [Chart Styling](https://vaadin.com/docs/next/components/charts/styling.md): How to style a chart with CSS or the Java API in your project.
- [Chart Data](https://vaadin.com/docs/next/components/charts/data.md): Explains the storage and use of chart data.
- [AI-Powered Chart](https://vaadin.com/docs/next/components/charts/ai-powered.md): Let users build and update charts from your application database using natural language.
- [Timeline](https://vaadin.com/docs/next/components/charts/timeline.md): How to add the ability to select different time ranges for charts.
- [Gantt Chart](https://vaadin.com/docs/next/components/charts/gantt.md): Vaadin Charts support for creating Gantt charts.
- [Exporting](https://vaadin.com/docs/next/components/charts/exporting.md): How to export charts using different methods.
- [Usage with React](https://vaadin.com/docs/next/components/charts/usage-with-react.md): Examples of using Charts with React
- [Usage with Lit](https://vaadin.com/docs/next/components/charts/usage-with-lit.md): Examples of using Charts with Lit.