This library aims to allow you to visualize a variety of graphs in
an intuitve manner without comprimising flexibility regarding configuration.
It is insprired by the elm-html api, using the element attrs children pattern.
This is the function processing your entire plot configuration. Pass your meta attributes and plot elements to this function and a svg plot will be returned!
This returns a line element resulting in an line serie rendered in your plot.
main =
plot [] [ line [] [ ( 0, 1 ), ( 2, 2 ), ( 3, 4 ) ] ]This returns an area element resulting in an area serie rendered in your plot.
main =
plot [] [ area [] [ ( 0, -2 ), ( 2, 0 ), ( 3, 1 ) ] ]This returns an axis element resulting in an x-axis being rendered in your plot.
main =
plot [] [ xAxis [] ]This returns an axis element resulting in an y-axis being rendered in your plot.
main =
plot [] [ yAxis [] ]Convinience type to represent coordinates.
Convinience type to represent style.
The type representing an a meta configuration.
Specify the size of your plot in pixels.
Default: ( 800, 500 )
Add padding to your plot, meaning extra space below and above the lowest and highest point in your plot. The unit is pixels.
Default: ( 0, 0 )
Add classes to the svg element.
Default: []
Add styles to the svg element.
Default: [ ( "padding", "30px" ), ( "stroke", "#000" ) ]
The type representing a line configuration.
Add styles to your line serie.
main =
plot
[]
[ line
[ lineStyle [ ( "fill", "deeppink" ) ] ]
lineDataPoints
]The type representing an area configuration.
Add styles to your area serie.
main =
plot
[]
[ area
[ areaStyle
[ ( "fill", "deeppink" )
, ( "stroke", "deeppink" )
, ( "opacity", "0.5" ) ]
]
]
areaDataPoints
]The type representing an axis configuration.
Add classes to the container holding your axis.
main =
plot
[]
[ xAxis [ axisClasses [ "my-class" ] ] ]Default: []
Add style to the container holding your axis. Most properties are conveniently inherited by your ticks and labels.
main =
plot
[]
[ xAxis [ axisStyle [ ( "stroke", "red" ) ] ] ]Default: []
Add styling to the axis line.
main =
plot
[]
[ xAxis [ axisLineStyle [ ( "stroke", "blue" ) ] ] ]Default: []
Defines what ticks will be shown on the axis by specifying a list of values.
main =
plot
[]
[ xAxis [ tickValues [ 0, 1, 2, 4, 8 ] ] ]Note: If in the list of axis attributes, this attribute is followed by a
tickDelta attribute, then this attribute will have no effect.
Defines what ticks will be shown on the axis by specifying the delta between the ticks. The delta will be added from zero.
main =
plot
[]
[ xAxis [ tickDelta 4 ] ]Note: If in the list of axis attributes, this attribute is followed by a
tickValues attribute, then this attribute will have no effect.
Remove tick at origin. Useful when two axis' are crossing and you do not want the origin the be cluttered with labels.
main =
plot
[]
[ xAxis [ tickRemoveZero ] ]Type representing a tick view configuration attribute.
Defines how the tick will be displayed by specifying a list of tick view attributes.
main =
plot
[]
[ xAxis
[ tickConfigView
[ tickLength 10
, tickWidth 2
, tickStyle [ ( "stroke", "red" ) ]
]
]
]If you do not define another view configuration,
the default will be [ tickLength 7, tickWidth 1, tickStyle [] ]
Note: If in the list of axis attributes, this attribute is followed by a
tickCustomView, tickConfigViewFunc or a tickCustomViewIndexed attribute,
then this attribute will have no effect.
Defines how the tick will be displayed by specifying a list of tick view attributes.
toTickConfig : Int -> Float -> List TickViewAttr
toTickConfig index tick =
if isOdd index then
[ tickLength 7
, tickStyle [ ( "stroke", "#e4e3e3" ) ]
]
else
[ tickLength 10
, tickStyle [ ( "stroke", "#b9b9b9" ) ]
]
main =
plot
[]
[ xAxis
[ tickConfigViewFunc toTickConfig ]
]Note: If in the list of axis attributes, this attribute is followed by a
tickConfigView, tickCustomView or a tickCustomViewIndexed attribute,
then this attribute will have no effect.
Set the length of the tick.
main =
plot
[]
[ xAxis
[ tickConfigView [ tickLength 10 ] ]
]Set the width of the tick.
main =
plot
[]
[ xAxis
[ tickConfigView [ tickWidth 2 ] ]
]Add classes to the tick.
main =
plot
[]
[ xAxis
[ tickConfigView
[ tickClasses [ "my-class" ] ]
]
]Sets the style of the tick
main =
plot
[]
[ xAxis
[ tickConfigView
[ tickStyle [ ( "stroke", "blue" ) ] ]
]
]Defines how the tick will be displayed by specifying a function which returns your tick html.
viewTick : Float -> Svg.Svg a
viewTick tick =
text_
[ transform ("translate(-5, 10)") ]
[ tspan [] [ text "✨" ] ]
main =
plot [] [ xAxis [ tickCustomView viewTick ] ]Note: If in the list of axis attributes, this attribute is followed by a
tickConfigView or a tickCustomViewIndexed attribute, then this attribute will have no effect.
Same as tickCustomConfig, but the functions is also passed a value
which is how many ticks away the current tick is from the zero tick.
viewTick : Int -> Float -> Svg.Svg a
viewTick index tick =
text_
[ transform ("translate(-5, 10)") ]
[ tspan
[]
[ text (if isOdd index then "🌟" else "⭐") ]
]
main =
plot [] [ xAxis [ tickCustomViewIndexed viewTick ] ]Note: If in the list of axis attributes, this attribute is followed by a
tickConfigView or a tickCustomView attribute, then this attribute will have no effect.
Add a list of values where labels will be added.
main =
plot
[]
[ xAxis [ labelValues [ 20, 40, 60 ] ] ]Add a filter determining which of the ticks are added a label. The first argument passed to the filter is a number describing how many ticks a way the current tick is. The second argument is the value of the tick.
onlyEvenTicks : Int -> Float -> Bool
onlyEvenTicks index value =
rem 2 index == 0
main =
plot
[]
[ xAxis [ labelValues onlyEvenTicks ] ]Default: (\a b -> True)
Note: If in the list of axis attributes, this attribute is followed by a
labelValues attribute, then this attribute will have no effect.
Type representing a label view configuration attribute.
Configure the label view specifying a list of label view attributes.
main =
plot
[]
[ xAxis
[ labelConfigView
[ labelFormat (\t -> toString t ++ " s") ]
]
]Configure the label view specifying a function returning a list of label view attributes. The function will be passed:
An integer representing the amount of ticks away from the origin, the current tick is.
A float value represeting the value of the tick.
toLabelConfig : Int -> Float -> List TickViewAttr toLabelConfig index tick = if isOdd index then [ labelFormat (\t -> toString t ++ " s") ] else [ labelFormat (always "") ]
main = plot [] [ xAxis [ labelConfigViewFunc toLabelConfig ] ]
Format the label based on its value.
main =
plot
[]
[ xAxis
[ labelConfigView
[ labelFormat (\l -> toString l ++ " DKK") ]
]
]Move the position of the label.
main =
plot
[]
[ xAxis
[ labelConfigView [ labelDisplace ( 0, 27 ) ] ]
]Add classes to the label.
main =
plot
[]
[ xAxis
[ labelConfigView
[ labelClasses [ "my-class" ] ]
]
]Move the position of the label.
main =
plot
[]
[ xAxis
[ labelConfigView
[ labelStyle [ ("stroke", "blue" ) ] ]
]
]Add a custom view for rendering your label.
viewLabel : Float -> Svg.Svg a
viewLabel tick =
text_ mySpecialAttributes mySpecialLabelDisplay
main =
plot
[]
[ xAxis [ labelCustomView viewLabel ] ]Note: If in the list of axis attributes, this attribute is followed by a
labelFormat attribute, then this attribute will have no effect.
Same as labelCustomView, except this view is also passed the value being
the amount of ticks the current tick is away from zero.
viewLabel : Int -> Float -> Svg.Svg a
viewLabel fromZero tick =
let
attrs =
if isOdd fromZero then oddAttrs
else evenAttrs
in
text_ attrs labelHtml
main =
plot
[]
[ xAxis [ labelCustomViewIndexed viewLabel ] ]Note: If in the list of axis attributes, this attribute is followed by a
labelFormat attribute, then this attribute will have no effect.
This returns an axis element resulting in horizontal grid lines being rendered in your plot.
main =
plot [] [ verticalGrid [] ]This returns an grid element resulting in vertical grid lines being rendered in your plot.
main =
plot [] [ horizontalGrid [] ]Adds grid lines where the ticks on the corresponding axis are.
main =
plot
[]
[ verticalGrid [ gridMirrorTicks ]
, xAxis []
]Note: If in the list of axis attributes, this attribute is followed by a
gridValues attribute, then this attribute will have no effect.
Specify a list of ticks where you want grid lines drawn.
plot [] [ verticalGrid [ gridValues [ 1, 2, 4, 8 ] ] ]Note: If in the list of axis attributes, this attribute is followed by a
gridMirrorTicks attribute, then this attribute will have no effect.
Specify classes for the grid.
plot
[]
[ verticalGrid
[ gridMirrorTicks
, gridClasses [ "my-class" ]
]
]Remember that if you do not specify either gridMirrorTicks
or gridValues, then we will default to not showing any grid lines.
Specify styles for the gridlines.
plot
[]
[ verticalGrid
[ gridMirrorTicks
, gridStyle myGridStyles
]
]Remember that if you do not specify either gridMirrorTicks
or gridValues, then we will default to not showing any grid lines.
Represents child element of the plot.