Charts

Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting.
Topics
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 See Pricing
Open in a
new tab
Source code
ChartsOverview.javapackage com.vaadin.demo.component.charts;

import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.ChartType;
import com.vaadin.flow.component.charts.model.Configuration;
import com.vaadin.flow.component.charts.model.Cursor;
import com.vaadin.flow.component.charts.model.DataSeries;
import com.vaadin.flow.component.charts.model.DataSeriesItem;
import com.vaadin.flow.component.charts.model.ListSeries;
import com.vaadin.flow.component.charts.model.Marker;
import com.vaadin.flow.component.charts.model.PlotOptionsArea;
import com.vaadin.flow.component.charts.model.PlotOptionsColumn;
import com.vaadin.flow.component.charts.model.PlotOptionsLine;
import com.vaadin.flow.component.charts.model.PlotOptionsPie;
import com.vaadin.flow.component.charts.model.PlotOptionsSeries;
import com.vaadin.flow.component.charts.model.PointPlacement;
import com.vaadin.flow.component.charts.model.Stacking;
import com.vaadin.flow.component.charts.model.XAxis;
import com.vaadin.flow.component.charts.model.YAxis;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("charts-overview")
public class ChartsOverview extends Div {

    public ChartsOverview() {
        // tag::snippet[]
        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);
        // end::snippet[]
    }

}
charts-overview.tsximport type { Options, PointOptionsObject, SeriesOptionsType } from 'highcharts';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const hostStyle: React.CSSProperties = {
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
  backgroundColor: 'var(--docs-surface-color-2)',
  padding: '0.5rem',
  boxSizing: 'border-box',
};

const chartStyle: React.CSSProperties = {
  padding: '0.5rem',
  boxSizing: 'border-box',
};

const columnOptions: Options = { yAxis: { title: { text: '' } } };

const areaOptions: Options = {
  yAxis: { title: { text: '' } },
  xAxis: { visible: false },
  plotOptions: {
    series: {
      marker: {
        enabled: false,
      },
    },
  },
};

const pieOptions: Options = {
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      innerSize: '60%',
    },
  },
};

const pieValues: PointOptionsObject[] = [
  { name: 'Chrome', y: 38 },
  { name: 'Firefox', y: 24 },
  { name: 'Edge', y: 15, sliced: true, selected: true },
  { name: 'Internet Explorer', y: 8 },
];

const polarOptions: Options = {
  xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: {},
    visible: false,
  },
  yAxis: { min: 0 },
  plotOptions: {
    series: {
      pointStart: 0,
      pointInterval: 45,
    },
    column: {
      pointPadding: 0,
      groupPadding: 0,
    },
  },
};

const seriesOptions: SeriesOptionsType = {
  pointPlacement: 'between',
  type: 'column',
};

function Example() {
  return (
    <div style={hostStyle}>
      {/* tag::snippet[] */}
      <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>
      {/* end::snippet[] */}
    </div>
  );
}

charts-overview.tsimport '@vaadin/charts';
import type { Options, PointOptionsObject } from 'highcharts';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('charts-overview')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  static override styles = css`
    :host {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      background-color: var(--docs-surface-color-2);
      padding: 0.5rem;
      box-sizing: border-box;
    }

    vaadin-chart {
      padding: 0.5rem;
      box-sizing: border-box;
    }
  `;

  @state()
  private areaOptions: Options = {
    yAxis: { title: { text: '' } },
    xAxis: { visible: false },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
        },
      },
    },
  };

  @state()
  private columnOptions: Options = { yAxis: { title: { text: '' } } };

  @state()
  private months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];

  @state()
  private pieOptions: Options = {
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        innerSize: '60%',
      },
    },
  };

  @state()
  private pieValues: PointOptionsObject[] = [
    { name: 'Chrome', y: 38 },
    { name: 'Firefox', y: 24 },
    { name: 'Edge', y: 15, sliced: true, selected: true },
    { name: 'Internet Explorer', y: 8 },
  ];

  @state()
  private polarOptions: Options = {
    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {},
      visible: false,
    },
    yAxis: { min: 0 },
    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45,
      },
      column: {
        pointPadding: 0,
        groupPadding: 0,
      },
    },
  };

  // tag::snippet[]
  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>
    `;
    // end::snippet[]
  }
}
Topics

Basic Use: The basic use of charts in a view.
Chart Types: A list of chart types available with information on using and configuring them.
Chart Configuration: How to configure the various types of charts.
Chart Styling: How to style a chart with CSS or the Java API in your project.
Chart Data: Explains the storage and use of chart data.
AI-Powered Chart: Let users build and update charts from your application database using natural language.
Timeline: How to add the ability to select different time ranges for charts.
Gantt Chart: Vaadin Charts support for creating Gantt charts.
Exporting: How to export charts using different methods.
Usage with React: Examples of using Charts with React
Usage with Lit: Examples of using Charts with Lit.
Docs

Docs

Charts

Topics
