peterszerzo / line-charts / LineChart.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 : (LineChart.Coordinate.Range -> LineChart.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 : (LineChart.Coordinate.Range -> LineChart.Coordinate.Range -> Basics.Float) -> Basics.Float -> Basics.Float -> 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.