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 : Config msg
float : Config msg
time : Config msg
You can also make your own with custom
!
long : Config msg
gridless : Config msg
labelless : Config msg
opposite : 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.
{ color : Color
, width : Basics.Float
, length : Basics.Float
, grid : Basics.Bool
, direction : Direction
, label : String -> Svg msg
}
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.
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:
- 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!
{ 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.