Used in the configuration in the ticks property of the options passed to Axis.custom.

xAxisConfig : Axis.Config Data msg
xAxisConfig =
  Axis.custom
    { ...
    , ticks = ticksConfig
    }


ticksConfig : Ticks.Config msg
ticksConfig =
  Ticks.intCustom 7 Tick.int
  --                ^^^^^^^^
  -- or
  Ticks.timeCustom 7 Tick.time
  -- or
  Ticks.floatCustom 7 Tick.float
  -- or
  Ticks.floatCustom 7 customTick
  -- or ... you get it

See the full example here.

Make your own tick!

customTick : Float -> Tick.Config msg
customTick number =
    let
        color =
            -- Change the color based on value!
            if number < 50 then
                Colors.purple


            else if number < 70 then
                Colors.green


            else
                Colors.pinkLight


        label =
            Junk.label color (toString number)
    in
    Tick.custom
        { position = number
        , color = Colors.black
        , width = 1
        , length = 7
        , grid = True
        , direction = Tick.positive
        , label = Just label
        }

See the full example here.

Explanation:

• position is the position on the axis.
• color is the color of the little line.
• width is the width of the little line.
• length is the length of the little line.
• grid is whether a grid will be placed by the tick or not.
• direction is the direction of the little line. If the tick in question is on the x-axis that means that positive means the tick points up, and negative points down.
• label is the label. If set to Nothing, no label will be drawn.

The direction of the little line. If the tick in question is on the x-axis that means that positive means the tick points up, and negative points down.

This is the default formatting of the time type. Useful when you want to change other properties of your time tick, but won't bother with the formatting.

tickConfig : Tick.Time -> Tick.Config msg
tickConfig time =
    Tick.custom
        { position = time.timestamp
        , color = Color.blue
        , width = 1
        , length = 7
        , grid = True
        , direction = Tick.positive
        , label =
            Just <|
                Junk.label Color.blue (Tick.format time)
        }

Explanation:

• ** timestamp ** is the position where the tick goes on the axis.
• ** isFirst ** is whether this is the first tick or not.
• ** interval ** is the interval at which all the ticks are spaced.
• ** change ** is a Just when the tick is changing to a larger unit than used in the interval. E.g. if the interval is 2 hours, then this will be a Just Day when the day changes. Useful if you want a different formatting for those ticks!

The interval at which ticks are spaced. If ticks a spaced with two hours, this will be { unit = Hour, multiple = 2 }.

You can format your tick label differently based on it's unit.