terezka / elm-charts-alpha / Chart.Axis

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


type alias Config value data msg =
Internal.Axis.Config value data msg

Use in the Chart.Config passed to Chart.viewCustom.

chartConfig : Chart.Config value data msg
chartConfig =
  { ...
  , x = Chart.Axis.default "Age" Chart.Axis.Unit.years .age
  , y = Chart.Axis.default "Weight" Chart.Axis.Unit.kilograms .weight
  , ...
  }

default : String -> Internal.Unit.Config -> (data -> value) -> Config value data msg

Draws a line the full length of your data range and adds a little space on both sides of that line. Also adds some nice ticks to it.

Pass the length of your axis in pixels, the title and it's variable.

xAxisConfig : Axis.Config Float Data msg
xAxisConfig =
  Axis.default "Age (years)" Chart.Axis.Unit.years .age

See the full example here.

full : String -> Internal.Unit.Config -> (data -> value) -> Config value data msg

Draws a line the full length of your axis range and adds some nice ticks to it.

Pass the length of your axis in pixels, the title and it's variable.

xAxisConfig : Axis.Config Float Data msg
xAxisConfig =
  Axis.full "Age (years)" Chart.Axis.Unit.years .age

See the full example here.

time : Time.Zone -> String -> Internal.Unit.Config -> (data -> value) -> Config value data msg

Draws a line the full length of your data range and adds some nice datetime ticks to it.

Pass the length of your axis in pixels, the title and it's variable.

xAxisConfig : Axis.Config Float Data msg
xAxisConfig =
  Axis.time 650 "Date" Chart.Axis.Unit.none .date

See the full example here.

picky : String -> Internal.Unit.Config -> (data -> value) -> List Basics.Float -> Config value data msg

Draws the full length of your axis range and adds some ticks at the positions specified in the last argument.

Pass the length of your axis in pixels, the title, it's variable and the numbers where you'd like ticks to show up.

xAxisConfig : Axis.Config Float Data msg
xAxisConfig =
  Axis.picky 650 "Age (years)" Chart.Axis.Unit.years .age [ 4, 25, 46 ]

See the full example here.

Note: This is of course not the only way for you to decide exactly where the ticks should go on the axis! If you need to customize ticks further, check out the ticks property in Axis.custom.

custom : Properties value data msg -> Config value data msg

Properties:

See the full example here.