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
<Chart
  theme={theme.value}
  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"
  theme={theme.value}
  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
  theme={theme.value}
  style={chartStyle}
  type="pie"
  tooltip
  additionalOptions={pieOptions}
>
  <ChartSeries title="Brands" values={pieValues} />
</Chart>

<Chart theme={theme.value} 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>

<label style={labelStyle}>
  Theme:
  <select style={selectStyle} onChange={changeTheme}>
    <option value="">Default</option>
    <option value="gradient">Gradient</option>
    <option value="monotone">Monotone</option>
    <option value="classic">Classic</option>
  </select>
</label>

Topics

Installing Charts for Vaadin Flow: How to install Charts in a project.
Basic Use: The basic use of charts in a view.
Chart Types: A list of chart types available and 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 in your project.
Chart Data: Explains the storage and use of chart data.
Migrating from Earlier Versions: Information on migrating chart components from earlier versions of Vaadin.
Timeline: How to add the ability to select different time ranges for charts.
Exporting Charts as SVG: How to export charts to SVG format.
Usage with React: Examples of using Charts with React
Usage with Lit: Examples of using Charts with Lit.

Docs

Docs

Charts

Topics