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

# <a id="charts.charttypes.gauge"></a>Gauges

A gauge is a one-dimensional chart with a circular Y-axis, with a rotating pointer that points to a value on the axis. A gauge can, in fact, have multiple Y-axes to display multiple scales.

A [*solid gauge*](https://vaadin.com/docs/next/components/charts/charttypes/solid-gauge.md#charts.charttypes.solidgauge) is like a regular gauge, except that a solid-color arc is used to show the current value, instead of a pointer. The color of the indicator arc can be configured to change according to color stops.

> **Note:** Gauge and solid gauge series shouldn’t be combined with series of other types.

> **Note:** A bar series inverts the entire chart; combine with care.

Consider the following gauge:

```java
Chart chart = new Chart(ChartType.GAUGE);
```

With the settings shown in the following sections, it is displayed as in [A Gauge](#figure.charts.charttypes.gauge).

[Image: charts gauge]

A Gauge

## <a id="charts.charttypes.gauge.conf"></a>Gauge Configuration

The start and end angles of the gauge can be configured in the `Pane` object of the chart configuration. The angles can be given as -360 to 360 degrees, with 0 at the top of the circle.

```java
Configuration conf = chart.getConfiguration();
conf.setTitle("Speedometer");
conf.getPane().setStartAngle(-135);
conf.getPane().setEndAngle(135);
```

## <a id="charts.charttypes.gauge.axis"></a>Axis Configuration

A gauge has only a Y-axis. You need to provide both a minimum and a maximum value for this.

```java
YAxis yaxis = new YAxis();
yaxis.setTitle("km/h");

// The limits are mandatory
yaxis.setMin(0);
yaxis.setMax(100);

// Other configuration
yaxis.getLabels().setStep(1);
yaxis.setTickInterval(10);
yaxis.setTickLength(10);
yaxis.setTickWidth(1);
yaxis.setMinorTickInterval("1");
yaxis.setMinorTickLength(5);
yaxis.setMinorTickWidth(1);

PlotBand green = new PlotBand(0, 60, null);
green.setClassName("green");

PlotBand yellow = new PlotBand(60, 80, null);
yellow.setClassName("yellow");

PlotBand red = new PlotBand(80, 100, null);
red.setClassName("red");

yaxis.setPlotBands(green, yellow, red);

conf.addyAxis(yaxis);
```

You can make all kinds of other configuration settings to the axis. See the API documentation for all the available parameters.

## <a id="charts.charttypes.gauge.data"></a>Setting & Updating Gauge Data

A gauge displays only a single value, which you can define as a data series of length 1, for example as follows:

```java
ListSeries series = new ListSeries("Speed", 80);
conf.addSeries(series);
```

Gauges are especially meaningful for displaying changing values. You can use the `updatePoint()` method in the data series to update the single value.

```java
final TextField tf = new TextField("Enter a new value");
layout.add(tf);

Button update = new Button("Update", (e) -> {
    Integer newValue = new Integer(tf.getValue());
    series.updatePoint(0, newValue);
});
layout.add(update);
```

## <a id="gauge-example"></a>Gauge Example

**Flow** — `ChartTypeGauge.java`

```java
Chart chart = new Chart(ChartType.GAUGE);

final Configuration configuration = chart.getConfiguration();
configuration.setTitle("Speedometer");
configuration.getChart().setWidth(500);

Pane pane = configuration.getPane();
pane.setStartAngle(-150);
pane.setEndAngle(150);

YAxis yAxis = new YAxis();
yAxis.setTitle("km/h");
yAxis.setMin(0);
yAxis.setMax(200);
yAxis.setTickLength(10);
yAxis.setTickPixelInterval(30);
yAxis.setTickPosition(TickPosition.INSIDE);
yAxis.setMinorTickLength(10);
yAxis.setMinorTickInterval("auto");
yAxis.setMinorTickPosition(TickPosition.INSIDE);

Labels labels = new Labels();
labels.setStep(2);
labels.setRotation("auto");
yAxis.setLabels(labels);

PlotBand[] bands = new PlotBand[3];
bands[0] = new PlotBand();
bands[0].setFrom(0);
bands[0].setTo(120);
bands[0].setClassName("band-0");
bands[1] = new PlotBand();
bands[1].setFrom(120);
bands[1].setTo(160);
bands[1].setClassName("band-1");
bands[2] = new PlotBand();
bands[2].setFrom(160);
bands[2].setTo(200);
bands[2].setClassName("band-2");
yAxis.setPlotBands(bands);

configuration.addyAxis(yAxis);

final ListSeries series = new ListSeries("Speed", 89);

PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
SeriesTooltip tooltip = new SeriesTooltip();
tooltip.setValueSuffix(" km/h");
plotOptionsGauge.setTooltip(tooltip);
series.setPlotOptions(plotOptionsGauge);

configuration.addSeries(series);
```