LineChart.Axis.Ticks

type alias Config msg =

Config msg

Part of the configuration in Axis.custom.

axisConfig : Axis.Config Data msg
axisConfig =
  Axis.custom
    { ..
    , ticks = Ticks.default
    , ...
    }

default : Config msg

Makes around five ticks at "nice" numbers.

** What are "nice" numbers/integers/datetimes? **

"Nice" numbers are intervals which begin with 10, 5, 3, 2, 1 (adjusted to magnitude, of course!). For dates, it means whole days, weeks, months or hours, minutes, and seconds.

Custom amount

Choose the approximate amount of ticks on your axis!

ticksConfig : Ticks.Config msg
ticksConfig =
    Ticks.int 7
        -- makes ca. 7 ticks at nice integers
        -- or
        Ticks.time
        7
        -- makes ca. 7 ticks at nice datetimes
        -- or
        Ticks.float
        7


-- makes ca. 7 ticks at nice float

See full example here.

int : Int -> Config msg

time : Zone -> Int -> Config msg

float : Int -> Config msg

Custom tick

Now you get to decide how the ticks should look. Remember that all formatting of the value in the label is done in Axis.Tick!

ticksConfig : Ticks.Config msg
ticksConfig =
    Ticks.intCustom 7 customTick

See full example here.

intCustom : Int -> (Int -> Config msg) -> Config msg

timeCustom : Zone -> Int -> (Time -> Config msg) -> Config msg

floatCustom : Int -> (Float -> Config msg) -> Config msg

Custom positions

custom : (Range -> Range -> List (Config msg)) -> Config msg

Make your own combination of ticks.

ticksConfig : Maybe Info -> Ticks.Config msg
ticksConfig maybeHovered =
    let
        hoverOne =
            case maybeHovered of
                Just hovered ->
                    [ Tick.float hovered.age ]


                Nothing ->
                    []


        framing range =
            List.map Tick.float [ range.min, range.max ]
    in
    Ticks.custom <|
        \dataRange axisRange ->
            framing dataRange ++ hoverOne

See full example here.

** What if I still want nice values?**

You can use Axis.Values to produce "nice" values within a given range.

peterszerzo/line-charts/1.0.1

LineChart.Axis.Ticks

Custom amount

Custom tick

Custom positions

Modules