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.