truqu / line-charts / LineChart.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 : Basics.Int -> Config msg

float : Basics.Float -> Config msg

time : Time -> Config msg

Special styles

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

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 =
{ position : Basics.Float
, color : Color
, width : Basics.Float
, length : Basics.Float
, grid : Basics.Bool
, direction : Direction
, label : Maybe (Svg msg) 
}

Explanation:


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:


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.