Attributes for altering the values and view of your axis' ticks.
Before you read any further, please note that when I speak of the tick index, then I'm talking about how many ticks that particular tick is from the origin.
Ok, now you can go on!
Provide a list of style attributes to alter the view of the tick.
myYAxis : Plot.Element msg
myYAxis =
Plot.yAxis
[ Axis.tick
[ Tick.view
[ Tick.style
[ ( "stroke", "deeppink" ) ]
, Tick.length 5
, Tick.width 2
]
]
]Note: If you add another attribute msgltering the view like viewDynamic or viewCustom after this attribute,
then this attribute will have no effect.
Alter the view of the tick based on the tick's value and index (amount of ticks from origin) by providing a function returning a list of style attributes.
toTickStyles : ( Int, Float ) -> List Tick.StyleAttribute
toTickStyles ( index, value ) =
if isOdd index then
[ Tick.length 7
, Tick.style [ ( "stroke", "#e4e3e3" ) ]
]
else
[ Tick.length 10
, Tick.style [ ( "stroke", "#b9b9b9" ) ]
]
myYAxis : Plot.Element msg
myYAxis =
Plot.yAxis
[ Axis.tick
[ Tick.viewDynamic toTickStyles ]
]Note: If you add another attribute msgltering the view like view or viewCustom after this attribute,
then this attribute will have no effect.
Define your own view for the labels. Your view will be passed label's value and index (amount of ticks from origin).
viewTick : ( Int, Float ) -> Svg.Svg a
viewTick ( index, tick ) =
text_
[ transform "translate(-5, 10)"
, Svg.Events.onClick (Custom MyTickClickMsg)
]
[ tspan
[]
[ text (if isOdd index then "🌟" else "⭐") ]
]
myXAxis : Plot.Element msg
myXAxis =
Plot.xAxis
[ Axis.tick
[ Tick.viewCustom viewTick ]
]Note: If you add another attribute msgltering the view like view or viewDynamic after this attribute,
then this attribute will have no effect.
If these attributes do not forfill your needs, try out the viewCustom! If you have
a suspicion that I have missed a very common configuration, then please let me know and I'll add it.
Add classes to the tick.
myYAxis : Plot.Element msg
myYAxis =
Plot.yAxis
[ Axis.tick
[ Tick.view
[ Tick.classes [ "my-tick" ] ]
]
]Set the width of the tick (in pixels).
myYAxis : Plot.Element msg
myYAxis =
Plot.yAxis
[ Axis.tick
[ Tick.view
[ Tick.width 2 ]
]
]Set the length of the tick (in pixels).
myYAxis : Plot.Element msg
myYAxis =
Plot.yAxis
[ Axis.tick
[ Tick.view
[ Tick.length 8 ]
]
]Set the stroke color.
Set the stroke width (in pixels).
Set the opacity.
Add your own attributes. For events, see this example
Specify what values will be added a tick.
myXAxis : Plot.Element msg
myXAxis =
Plot.xAxis
[ Axis.tick
[ Tick.values [ 0, 1, 2, 4, 8 ] ]
]Note: If you add another attribute msgltering the values like delta after this attribute,
then this attribute will have no effect.
Specify what values will be added a tick by specifying the space between each tick.
myXAxis : Plot.Element msg
myXAxis =
Plot.xAxis
[ Axis.tick
[ Tick.delta 4 ]
]Note: If you add another attribute msgltering the values like values after this attribute,
then this attribute will have no effect.