# groups

Comparison series = legend labels + colour order (one per value index).

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

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

## Definition

| Item | Value |
| --- | --- |
| JavaScript property | `groups` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<string>` |
| Default | `undefined` |

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

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

## Configuration example

```javascript
// Register sy-dot-plot-chart and create the element before configuring it.
chart.groups = [
  "Reference",
  "Target",
  "Actual"
];
```

- [Dot Plot · Complete examples and API](https://chart.syidax.com/docs/components/dot-plot.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-dumbbell-chart](https://chart.syidax.com/docs/components/dumbbell.md#property-groups)
- [sy-tornado-chart](https://chart.syidax.com/docs/components/tornado.md#property-groups)
- [sy-dot-plot-chart](https://chart.syidax.com/docs/components/dot-plot.md#property-groups)