# swatch — Examples

## shapes

```html
<swatch-ui shape="dot" color="var(--a-data-0)" label="Revenue"></swatch-ui>
```

## sizes

```html
<row-ui gap="3" align="center">
  <swatch-ui shape="dot" size="sm" color="var(--a-data-0)" label="sm"></swatch-ui>
  <swatch-ui shape="dot" size="md" color="var(--a-data-0)" label="md"></swatch-ui>
  <swatch-ui shape="dot" size="lg" color="var(--a-data-0)" label="lg"></swatch-ui>
</row-ui>
```

## composition — chart-legend-ui

```html
<chart-legend-ui shape="dot" position="bottom" id="demo-legend-dot"></chart-legend-ui>
```
