If you're confused as to what "axis range" and "data range" means,
check out Axis.Range
for an explanation!
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:
Chart.Axis.Title
for more information and examples.Chart.Axis.Unit
for more information and examples.Chart.Axis.Range
for more information and examples.Chart.Axis.Line
for more information and examples.ticks: Customizes your ticks.
See Chart.Axis.Ticks
for more information and examples.
xAxisConfig : Axis.Config Float Data msg xAxisConfig = Axis.custom { title = Chart.Axis.Title.default "Year" , variable = Just << .date , unit = Chart.Axis.Unit.none , range = Chart.Axis.Range.padded 20 20 , line = Chart.Axis.Line.full Colors.black , ticks = Chart.Axis.Ticks.time 5 }
See the full example here.