Docs

Documentation versions (currently viewingVaadin 25.3 (pre-release))

Chart Types

A list of chart types available with information on using and configuring them.

Charts come with over a dozen different types. You normally specify the chart type in the constructor of the Chart object. The available chart types are defined in the ChartType enum. You can later read or set the chart type with the chartType property of the chart model, which you can get with getConfiguration().getChart().

The supported chart types are:

area

arearange

areaspline

areasplinerange

bar

boxplot

bubble

bullet

candlestick

column

columnrange

errorbar

flags

funnel

gantt

gauge

heatmap

line

ohlc

organization

pie

polygon

pyramid

sankey

scatter

solidgauge

spline

timeline

treemap

waterfall

xrange

Most chart types with two axes can also be drawn in polar coordinates, and most types can be given a three-dimensional projection.

Each chart type has its specific plot options and supports its specific collection of chart features. They also have specific requirements for the data series. Configuring Data Labels is common to all chart types. Configuring Markers is available for all chart types displaying point data.

Topics

Line & Spline
Charts that connect data points with straight lines or smooth curves.
Area
Charts that fill the area between the line and a threshold value.
Column & Bar
Charts that illustrate values as vertical or horizontal bars.
Error Bars
High and low values in statistical data, drawn as whiskers on a stem.
Box Plot
Charts that display the distribution of statistical variables.
Scatter
Charts that display a set of unconnected data points.
Bubble
Scatter charts that show a third dimension as the size of each point.
Bullet
Charts that display a value together with a target value.
Organization
Charts that visualize parent/child relationships between nodes.
Sankey
Charts that visualize how quantities flow between two sets of nodes.
Pie
Charts that illustrate values as sectors proportional to their sum.
Gantt
A bar chart that visualizes a project schedule.
Gauge
One-dimensional charts with a circular Y-axis and a rotating pointer.
Solid Gauge
Gauges that show the value as a solid-color arc instead of a pointer.
Area & Column Range
Charts that display an area or column between a minimum and a maximum value.
Polar, Wind Rose & Spiderweb
Charts drawn in polar coordinates, with the X axis curved on a circle.
Funnel & Pyramid
Charts that visualize stages of a process as layers of diminishing size.
Waterfall
Charts that visualize level changes from an initial to a final level.
Timeline
Charts that visualize events on a time axis.
X-Range
Charts that visualize a range on the X axis.
Heat Map
A two-dimensional grid where the color of a cell reflects a value.
Tree Map
Nested rectangles whose size represents the value of each item.
Polygon
Freeform filled or stroked shapes drawn in the Cartesian plane.
Flags
Call-out labels that annotate a series or the X axis.
OHLC & Candlestick
Charts that display the change in price over a period of time.
Data Labels
How to configure the labels shown next to data points.
Data Point Markers
How to configure the markers that visualize data points.
3D Charts
How to give a chart a three-dimensional projection.

7D9B93CE-C74C-4440-869F-9594622310AD