peterszerzo / line-charts / LineChart.Axis.Line

If you're confused as to what "axis range" and "data range" means, check out Axis.Range for an explanation!


type alias Config msg =
Internal.Axis.Line.Config msg

This configuration is part of the configuration in Axis.custom.

axisConfig : Axis.Config Data msg
axisConfig =
  Axis.custom
    { ..
    , range = AxisLine.default
    , ...
    }

See full example here.

default : Config msg

Draws the full length of your axis range.

axisLineConfig : AxisLine.Config msg
axisLineConfig =
    AxisLine.default

See full example here.

full : Color -> Config msg

Same as the default, except you get to pick the color.

axisLineConfig : AxisLine.Config msg
axisLineConfig =
    AxisLine.full Color.red

See full example here.

rangeFrame : Color -> Config msg

Draws the full length of your data range in your given color.

axisLineConfig : AxisLine.Config msg
axisLineConfig =
    AxisLine.rangeFrame Color.red

See full example here.

none : Config msg

Removes the axis line entirely.

axisLineConfig : AxisLine.Config msg
axisLineConfig =
    AxisLine.none

See full example here.

custom : (LineChart.Coordinate.Range -> LineChart.Coordinate.Range -> Properties msg) -> Config msg

Given your data range and axis range respectivily, define your own axis line configuration.

axisLineConfig : AxisLine.Config msg
axisLineConfig =
    AxisLine.custom <|
        \dataRange axisRange ->
            { color = Colors.gray
            , width = 2
            , events = []
            , start = dataRange.min
            , end = 5
            }

See full example here.


type alias Properties msg =
{ color : Color
, width : Basics.Float
, events : List (Svg.Attribute msg)
, start : Basics.Float
, end : Basics.Float 
}