terezka / elm-charts-alpha / Chart.Legends


type alias Config msg =
Internal.Legends.Config msg

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

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

default : Config msg

Produces legends in the top right corner.

none : Config msg

Removes the legends.

Grouped legends -- TODO rename

Where the titles are gathered in one spot.

Legends

grouped : (Chart.Coordinate.Range -> Basics.Float) -> (Chart.Coordinate.Range -> Basics.Float) -> Basics.Float -> Basics.Float -> Config 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 : Chart.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 -> (Chart.Coordinate.System -> List (Legend msg) -> Svg msg) -> Config 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.