Internal.Axis.Tick.Config msg
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.
int : Basics.Int -> Config msg
float : Basics.Float -> Config msg
time : Time -> Config msg
You can also make your own with custom
!
long : Basics.Float -> Config msg
gridless : Basics.Float -> Config msg
labelless : Basics.Float -> Config msg
opposite : Basics.Float -> Config msg
custom : Properties msg -> Config msg
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.
{ position : Basics.Float
, color : Color
, width : Basics.Float
, length : Basics.Float
, grid : Basics.Bool
, direction : Direction
, label : Maybe (Svg msg)
}
Explanation:
Nothing
, no label will be drawn.Internal.Axis.Tick.Direction
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.
negative : Direction
positive : Direction
format : Time -> String
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)
}
{ timestamp : Time.Posix
, zone : Time.Zone
, isFirst : Basics.Bool
, interval : Interval
, change : Maybe Unit
}
Explanation:
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!{ unit : Unit
, multiple : Basics.Int
}
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.