peterszerzo / line-charts / LineChart.Legends


type alias Config data msg =
Internal.Legends.Config data msg

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

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

default : Config data msg

Produces legends in the top right corner.

none : Config data msg

Removes the legends.

Free legends

Where the title is hanging by its respective line.

Legends

byEnding : (String -> Svg msg) -> Config data msg

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.

byBeginning : (String -> Svg msg) -> Config data msg

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

Grouped legends

Where the titles are gathered in one spot.

Legends

grouped : (LineChart.Coordinate.Range -> Basics.Float) -> (LineChart.Coordinate.Range -> Basics.Float) -> Basics.Float -> Basics.Float -> Config data msg

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:

Legends

See the full example here.

groupedCustom : Basics.Float -> (LineChart.Coordinate.System -> List (Legend msg) -> Svg msg) -> Config data msg

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:

Legends

See the full example here.


type alias Legend msg =
{ sample : Svg msg
, label : String 
}

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