truqu / line-charts / LineChart.Axis.Ticks


type alias Config msg =
Internal.Axis.Ticks.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 : Basics.Int -> Config msg

time : Time.Zone -> Basics.Int -> Config msg

float : Basics.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 : Basics.Int -> (Basics.Int -> LineChart.Axis.Tick.Config msg) -> Config msg

timeCustom : Time.Zone -> Basics.Int -> (LineChart.Axis.Tick.Time -> LineChart.Axis.Tick.Config msg) -> Config msg

floatCustom : Basics.Int -> (Basics.Float -> LineChart.Axis.Tick.Config msg) -> Config msg

Custom positions

custom : (LineChart.Coordinate.Range -> LineChart.Coordinate.Range -> List (LineChart.Axis.Tick.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.