# chart-legend — Examples

## shape

```html
<chart-legend-ui id="legend-dot" shape="dot" items='[{"key":"revenue","label":"Revenue","slot":0},{"key":"users","label":"Users","slot":1},{"key":"churn","label":"Churn","slot":2}]'></chart-legend-ui>
```

## position

```html
<chart-legend-ui id="legend-bottom" shape="dot" position="bottom" items='[{"key":"a","label":"Series A","slot":0},{"key":"b","label":"Series B","slot":1},{"key":"c","label":"Series C","slot":2}]'></chart-legend-ui>
```

## for — mirror a chart's legendData

```html
<div style="display:flex; flex-direction:column; gap:var(--a-space-2);">
  <chart-ui id="demo-chart" type="multi-line" x="month" y="revenue,users,churn"></chart-ui>
  <chart-legend-ui id="legend-for" for="demo-chart" shape="line"></chart-legend-ui>
</div>
```
