LineChart.Axis.Ticks

type alias Config msg =

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 : Int -> Config msg

time : Zone -> Int -> Config msg

float : 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 : Int -> (Int -> Config msg) -> Config msg

timeCustom : Zone -> Int -> (Time -> Config msg) -> Config msg

floatCustom : Int -> (Float -> Config msg) -> Config msg

Custom positions

custom : (Range -> Range -> List (Config 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.

terezka/line-charts/2.0.0

LineChart.Axis.Ticks

Custom amount

Custom tick

Custom positions

Modules