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


type alias Config msg =
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

Special styles

You can also make your own with custom!

long : Config msg

gridless : Config msg

labelless : Config msg

opposite : Config msg

Customiztion

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.


type alias Properties msg =
{ 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.


type alias Direction =
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

Time formatting

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) }


type alias 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!


type alias Interval =
{ 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 }.


type Unit
    = Millisecond
    | Second
    | Minute
    | Hour
    | Day
    | Month
    | Year

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