# Legends

> Explain the symbols of a profile with a ready-made SVG legend, or build your own legend layout from the legend entries and per-symbol drawings.

A profile uses symbols for materials and features: gravel pack and seal, casing and screen, fractures that yield water, dry and wet caves. A legend explains them. `@welldot/render` offers a ready-made legend panel and the building blocks for your own.

## A legend panel

```html
<svg id="legend"></svg>
```

```ts
renderer.renderLegend('#legend', well);
```

`renderLegend(selector, well)` draws a horizontal legend with only the entries the well needs, labelled from `renderConfig.legend.labels` (English after `applyRenderLocale(config, 'en')`, see [Locale and units](/render/guides/locale-and-units)).

Without a renderer instance, `drawWellLegend` does the same:

```ts
import {
  INTERACTIVE_RENDER_CONFIG,
  applyRenderLocale,
  drawWellLegend,
} from '@welldot/render';

const { legend } = applyRenderLocale(INTERACTIVE_RENDER_CONFIG, 'en');
drawWellLegend('#legend', well, { config: legend });
```

It sets the SVG to 0 × 0 when the well needs no legend entry. Without `config` the labels are the Portuguese defaults.

## Your own layout

To put the legend in a table, an HTML list or a PDF, list the entries and draw each symbol on its own:

```ts
import { drawWellLegendSymbol, getWellLegendItems } from '@welldot/render';

const items = getWellLegendItems(well); // [{ key: 'boreHole', label: '…' }, …] in display order

const list = document.querySelector('#legend-list')!;
items.forEach((item, i) => {
  const li = document.createElement('li');
  li.innerHTML = `<svg id="symbol-${i}"></svg> <span>${item.label}</span>`;
  list.append(li);
  drawWellLegendSymbol(`#symbol-${i}`, item);
});
```

Each symbol is a 28 × 16 px SVG with every texture it uses defined inside, so its `outerHTML` renders on its own, for example when embedded in a PDF. On a renderer instance, `renderer.getLegendItems(well)` and `renderer.renderLegendSymbol(selector, item)` do the same with the renderer's labels and theme.

Entry keys are the keys of `renderConfig.legend.labels`: `boreHole`, `surfaceCase`, `holeFillGravel`, `holeFillSeal`, `wellCase`, `wellScreen`, `reduction`, `centralizer`, `pump`, `cementPad`, `fractureSingle`, `fractureSwarm`, `fractureWater`, `caveDry`, `caveWet`, `conflict`.

## Lithology swatches

Lithology layers are explained by their description rather than a fixed legend. To show a layer's fill next to its description in a table, draw a swatch after `prepareSvg()`:

```ts
well.lithology.forEach((layer, i) => {
  renderer.renderLithologySwatch(`#swatch-${i}`, layer, 12); // a 12 × 12 px square
});
```