# plotBands

Gauge plot bands — an array (property), or `'auto'` for %-of-max zones.

Canonical: https://chart.syidax.com/docs/options/plotBands/

<a id="definition"></a>

## Definition

| Item | Value |
| --- | --- |
| JavaScript property | `plotBands` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `GaugePlotBand[] \| 'auto'` |
| Default | `undefined` |
| Literals in the type | `auto` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [GaugePlotBand](https://chart.syidax.com/docs/types/GaugePlotBand.md) — Type definition

<a id="example"></a>

## Configuration example

```javascript
// Register sy-gauge-chart and create the element before configuring it.
chart.plotBands = [
  {
    "from": 0,
    "to": 120,
    "color": "#16a34a"
  },
  {
    "from": 120,
    "to": 160,
    "color": "#f59e0b"
  },
  {
    "from": 160,
    "to": 200,
    "color": "#dc2626"
  }
];
```

- [Gauge · Complete examples and API](https://chart.syidax.com/docs/components/gauge.md)

<a id="related"></a>

## Related documentation

A property with the same name may have different types and defaults across charts. When using a direct tag, follow that chart's documentation below.

- [Shared facade and direct tags](https://chart.syidax.com/docs/concepts.md)
- [sy-gauge-chart](https://chart.syidax.com/docs/components/gauge.md#property-plotBands)