terezka / elm-charts-alpha / Chart.Axis.Title


type alias Config msg =
Internal.Axis.Title.Config msg

Part of the configuration in Axis.custom.

axisConfig : Axis.Config Data msg
axisConfig =
  Axis.custom
    { title = Title.default
    , ...
    }

default : String -> Config msg

Place the title at the maxima of your axis range.

atAxisMax : Basics.Float -> Basics.Float -> String -> Config msg

Place the title at the maxima of your axis range. Arguments:

  1. The x offset in SVG-space.
  2. The y offset in SVG-space.
  3. The title.

    titleConfig : Title.Config msg titleConfig = Title.atAxisMax 0 10 "Age"

See full example here.

atDataMax : Basics.Float -> Basics.Float -> String -> Config msg

Place the title at the maxima of your data range. Arguments:

  1. The x offset in SVG-space.
  2. The y offset in SVG-space.
  3. The title.

    titleConfig : Title.Config msg titleConfig = Title.atDataMax 0 10 "Age"

See full example here.

atPosition : (Chart.Coordinate.Range -> Chart.Coordinate.Range -> Basics.Float) -> Basics.Float -> Basics.Float -> String -> Config msg

Place your title in any spot along your axis. Arguments:

  1. Given the data range and axis range, provide a position.
  2. The x offset in SVG-space.
  3. The y offset in SVG-space.
  4. The title.

    titleConfig : Title.Config msg titleConfig = let position dataRange axisRange = 80 in Title.atPosition position -15 30 "Weight"

See full example here.

custom : (Chart.Coordinate.Range -> Chart.Coordinate.Range -> Basics.Float) -> Basics.Float -> Basics.Float -> Anchor -> String -> (String -> Svg msg) -> Config msg

Almost the same as atPosition except instead of a string title, you pass a SVG title. Arguments:

  1. Given the data range and axis range, provide a position.
  2. The x offset in SVG-space.
  3. The y offset in SVG-space.
  4. The title view.

    titleConfig : Title.Config msg titleConfig = let position dataRange axisRange = middle axisRange in Title.custom position -10 35 <| Svg.g [ Svg.Attributes.style "text-anchor: middle;" ] [ Junk.label Colors.pink "Weight" ]

    middle : Coordinate.Range -> Float middle { min, max } = min + (max - min) / 2

See full example here.


type alias Anchor =
Internal.Axis.Title.Anchor

start : Anchor

middle : Anchor

end : Anchor