# `Expresso.Element.Chart.Scatter.Legend`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/chart/scatter/legend.ex#L1)

The legends of a scatter plot, in a column at the right of the plot

A scatter plot has up to four legends, from the top:

- The series, with the symbol and the color of each one.
- The colors: each category of the color, with its color. When the symbol
  and the color of each point take the same category, the item also shows
  the symbol, and the chart has no legend of the symbols.
- The scale of a color from a number, with its highest and its lowest
  value.
- The symbols: each category of the symbol, with its symbol.
- The sizes: three marks of round sizes, with their values.

The options `color_label`, `symbol_label` and `size_label` give a title
to each legend. `layout/1` makes the rows, `place/2` puts them at the
right of the box of the plot, and `render/1` draws them.

# `inner_block`
*macro* 

# `layout`

```elixir
@spec layout(map()) :: %{rows: [map()], width: number()}
```

Make the rows of the legends from the assigns of a scatter plot

Each row has a `dy` from the top of the legends. An item of a category of
the color has the key `category`, so it goes into the group of its
category.

# `place`

```elixir
@spec place(%{rows: [map()], width: number()}, map()) :: map()
```

Put the rows of the legends at the right of the SVG, from the top of the box
of the plot

# `render`

```elixir
@spec render(map()) :: Phoenix.HTML.safe()
```

Draw the rows of the legends with the category of the assigns

The key `category` is `nil` for the rows outside the groups, or the name of
a category of the color for its item.

# `render_slot`
*macro* 

# `width`

```elixir
@spec width(%{rows: [map()], width: number()}) :: number()
```

Return the width that the legends take at the right of the SVG, with a gap
before them

    iex> Expresso.Element.Chart.Scatter.Legend.width(%{rows: [], width: 0})
    0

---

*Consult [api-reference.md](api-reference.md) for complete listing*