Use in the LineChart.Config passed to LineChart.viewCustom.

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , legends = Legends.default
  , ...
  }

Produces legends in the top right corner.

Removes the legends.

Places the legend by the end of its line.

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , legends = Legends.byEnding (Junk.label Colors.black)
  , ...
  }

See the full example here.

Same as byEnding, except by the beginning of the line!

Draws some legends. You desicde where. Arguments:

1. Given the x-axis range, you produce the x-coordinate in data-space of the legends.
2. Given the y-axis range, you produce the y-coordinate of data-space the legends.
3. Move the legends horizontally in SVG-space.
4. Move the legends vertically in SVG-space.

chartConfig : LineChart.Config Data msg
chartConfig =
  { ...
  , legends = Legends.grouped .max .min 0 -60 -- Bottom right corner
  , ...
  }

Makes this:

See the full example here.

Customize your grouped legends. Arguments:

1. The width of the line samples.
2. Your view function for the legends.

legends : Legends data msg
legends =
    Legends.groupedCustom 30 viewLegends

viewLegends : Coordinate.System -> List (Legends.Legend msg) -> Svg.Svg msg
viewLegends system legends =
    Svg.g
        [ Junk.transform
            [ Junk.move system system.x.min system.y.min
            , Junk.offset 20 20
            ]
        ]
        (List.indexedMap viewLegend legends)

viewLegend : Int -> Legends.Legend msg -> Svg.Svg msg
viewLegend index { sample, label } =
    Svg.g
        [ Junk.transform [ Junk.offset (toFloat index * 100) 20 ] ]
        [ sample, viewLabel label ]

viewLabel : String -> Svg.Svg msg
viewLabel label =
    Svg.g
        [ Junk.transform [ Junk.offset 40 4 ] ]
        [ Junk.label Colors.black label ]

Makes this:

See the full example here.

Stuff that's helpful when you're drawing your legends. A sample of your line as well your line's label.