terezka/line-charts/2.0.0

NOTE: the latest version is 2.0.2

LineChart.Axis.Title

type alias Config msg =
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 : Float -> 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 : Float -> 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 : (Range -> Range -> Float) -> Float -> 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 : (Range -> Range -> Float) -> Float -> 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.