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


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

Part of the configuration in Axis.custom.

axisConfig : Axis.Config Data msg
axisConfig =
  Axis.custom
    { ..
    , ticks = Ticks.default
    , ...
    }

default : Config msg

Makes around five ticks at "nice" numbers.

What are "nice" numbers/integers/datetimes?

"Nice" numbers are intervals which begin with 10, 5, 3, 2, 1 (adjusted to magnitude, of course!). For dates, it means whole days, weeks, months or hours, minutes, and seconds.

Custom amount

Choose the approximate amount of ticks on your axis!

ticksConfig : Ticks.Config msg
ticksConfig =
  Ticks.int 7   -- makes ca. 7 ticks at nice integers
  -- or
  Ticks.time 7  -- makes ca. 7 ticks at nice datetimes
  -- or
  Ticks.float 7 -- makes ca. 7 ticks at nice float

See full example here.

int : Basics.Int -> Config msg

time : Time.Zone -> Basics.Int -> Config msg

float : Basics.Int -> Config msg

Custom tick

Now you get to decide how the ticks should look. Remember that all formatting of the value in the label is done in Axis.Tick!

ticksConfig : Ticks.Config msg
ticksConfig =
  Ticks.intCustom 7 customTick

See full example here.

intCustom : Chart.Axis.Tick.Config msg -> Basics.Int -> Config msg

timeCustom : Time.Zone -> Chart.Axis.Tick.Config msg -> Basics.Int -> Config msg

floatCustom : Chart.Axis.Tick.Config msg -> Basics.Int -> Config msg

Custom positions

custom : (Basics.Int -> Chart.Coordinate.Range -> Chart.Coordinate.Range -> List (Set msg)) -> Config msg

Make your own combination of ticks.

ticksConfig : Maybe Info -> Ticks.Config msg
ticksConfig maybeHovered =
  let
    hoverOne =
      case maybeHovered of
        Just hovered -> [ Tick.float hovered.age ]
        Nothing -> []

    framing range =
      List.map Tick.float [ range.min, range.max ]
  in
  Ticks.custom <| \dataRange axisRange ->
    framing dataRange ++ hoverOne

See full example here.

What if I still want nice values?

You can use Axis.Values to produce "nice" values within a given range.