> 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="Pound 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>
  `;
```

**Flow** — `ChartsOverview.java`

```java
Chart column = new Chart(ChartType.COLUMN);
Configuration columnConf = column.getConfiguration();
columnConf.getChart().setStyledMode(true);
columnConf.setTitle((String) null);
columnConf.getxAxis().setCategories("Jan", "Feb", "Mar");
columnConf.getyAxis().setTitle("");
columnConf.addSeries(new ListSeries("Tokyo", 49.9, 71.5, 106.4));
columnConf.addSeries(new ListSeries("New York", 83.6, 78.8, 98.5));
columnConf.addSeries(new ListSeries("London", 48.9, 38.8, 39.3));

Chart area = new Chart(ChartType.AREA);
Configuration areaConf = area.getConfiguration();
areaConf.getChart().setStyledMode(true);
areaConf.setTitle((String) null);
areaConf.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr", "May",
        "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
areaConf.getxAxis().setVisible(false);
areaConf.getyAxis().setTitle("");
PlotOptionsArea areaOptions = new PlotOptionsArea();
areaOptions.setStacking(Stacking.NORMAL);
areaOptions.setMarker(new Marker(false));
areaConf.setPlotOptions(areaOptions);
areaConf.addSeries(new ListSeries("United States dollar", 135, 125, 89,
        124, 105, 81, 111, 94, 95, 129, 98, 84));
areaConf.addSeries(new ListSeries("Euro", 62, 72, 89, 68, 94, 92, 110,
        100, 109, 89, 86, 105));
areaConf.addSeries(new ListSeries("Japanese yen", 30, 25, 32, 26, 15,
        31, 24, 32, 21, 8, 12, 32));
areaConf.addSeries(new ListSeries("Pound sterling", 32, 21, 8, 12, 32,
        21, 12, 30, 25, 19, 26, 15));

Chart pie = new Chart(ChartType.PIE);
Configuration pieConf = pie.getConfiguration();
pieConf.getChart().setStyledMode(true);
pieConf.setTitle((String) null);
pieConf.getTooltip().setPointFormat(
        "{series.name}: <b>{point.percentage:.1f}%</b>");
PlotOptionsPie pieOptions = new PlotOptionsPie();
pieOptions.setAllowPointSelect(true);
pieOptions.setCursor(Cursor.POINTER);
pieOptions.setInnerSize("60%");
pieConf.setPlotOptions(pieOptions);
DataSeries brands = new DataSeries("Brands");
brands.add(new DataSeriesItem("Chrome", 38));
brands.add(new DataSeriesItem("Firefox", 24));
DataSeriesItem edge = new DataSeriesItem("Edge", 15);
edge.setSliced(true);
edge.setSelected(true);
brands.add(edge);
brands.add(new DataSeriesItem("Internet Explorer", 8));
pieConf.addSeries(brands);

Chart polar = new Chart();
Configuration polarConf = polar.getConfiguration();
polarConf.getChart().setStyledMode(true);
polarConf.setTitle((String) null);
polarConf.getChart().setPolar(true);
XAxis polarXAxis = new XAxis();
polarXAxis.setTickInterval(45);
polarXAxis.setMin(0);
polarXAxis.setMax(360);
polarXAxis.setVisible(false);
polarConf.addxAxis(polarXAxis);
YAxis polarYAxis = new YAxis();
polarYAxis.setMin(0);
polarConf.addyAxis(polarYAxis);
PlotOptionsSeries seriesOptions = new PlotOptionsSeries();
seriesOptions.setPointStart(0);
seriesOptions.setPointInterval(45);
PlotOptionsColumn columnOptions = new PlotOptionsColumn();
columnOptions.setPointPadding(0);
columnOptions.setGroupPadding(0);
polarConf.setPlotOptions(seriesOptions, columnOptions);
ListSeries polarColumn = new ListSeries("Column", 8, 7, 6, 5, 4, 3, 2,
        1);
PlotOptionsColumn polarColumnOptions = new PlotOptionsColumn();
polarColumnOptions.setPointPlacement(PointPlacement.BETWEEN);
polarColumn.setPlotOptions(polarColumnOptions);
ListSeries polarLine = new ListSeries("Line", 1, 2, 3, 4, 5, 6, 7, 8);
polarLine.setPlotOptions(new PlotOptionsLine());
ListSeries polarArea = new ListSeries("Area", 1, 8, 2, 7, 3, 6, 4, 5);
polarArea.setPlotOptions(new PlotOptionsArea());
polarConf.setSeries(polarColumn, polarLine, polarArea);

add(column, area, pie, polar);
```

**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="Pound 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.