lauber00 / 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.