This is a library to build configurable plots in svg. It aims to have sane defaults without compromising flexibility in custom styling.
The api is inspired by the standard elm-html library, resulting in the following structure.
view =
plot
[ dimensions ( 300, 400 ) ]
[ line [ stroke "red" ] points
, xAxis [ customViewTick myCustomTick ]
, yAxis [ tickList [ -20, 20, 40, 82 ] ]
]You always have the top element plot and its first argument is its attributes
and its second argument is its children elements. Similarily, the child elements'
first argument is always a list of attributes.
Represents an attribute for the plot.
Represents an attribute for the axis.
Represents an attribute for the grid.
Represents an attribute for the serie.
Represents an attribute for the serie.
The parent to all your plot elements. Specify a list attributes as the first argument and a list of plot elements as the second.
attributes : List PlotAttr
attributes =
[ dimensions ( 300, 400 ) ]
children : List (Element msg)
children =
[ line [ stroke "red" ] points
, xAxis [ customViewTick myCustomTick ]
, yAxis []
]
view =
plot attributes childrenSpecify the width and height in pixels.
Specify padding on the y axis (in pixels)
paddingTop : Int
paddingTop =
40
paddingBottom : Int
paddingBottom =
30
view : Html msg
view =
plot [ padding (paddingBottom, paddingTop) ] []Specify a list of styles to apply to the svg element.
Convinience type to represent coordinates
Draws a area serie.
area [] [ (2, 4), (3, 6), (5, 3.4) ]Draws a line serie.
area [] [ (2, 3), (3, 8), (5, 7) ]Specify the area serie style.
line [ lineStyle [ ( "stroke", "blue" ) ] ]Specify the area serie style.
area [ areaStyle [ ( "stroke", "blue", "fill", "green" ) ] ]Draws a x-axis.
Draws a y-axis.
Specify the list of ticks to be show in on the axis.
xAxis [ tickList [ 10 25 32 47 ] ]Specify the step size between the ticks.
xAxis [ stepSize 5 ]Specify a guiding amount of ticks which the library will use to calculate "nice" axis values.
xAxis [ amountOfTicks 5 ]Specify the html to use for each tick. If you want to displace the tick, it
can be recommended to use Svg.Attributes.transform in your tick view.
myCustomTick : Float -> Svg.Svg a
myCustomTick tick =
Svg.text' [] [ Svg.tspan [] [ Svg.text "⚡️" ] ]
view : Html msg
view =
plot [] [ xAxis [ customViewTick myCustomTick ] ]Specify the html to use for each label.
myCustomLabel : Float -> Svg.Svg a
myCustomLabel tick =
Svg.text' [] [ Svg.tspan [] [ Svg.text ((toString tick) ++ " ms") ] ]
view : Html msg
view =
plot [] [ xAxis [ customViewLabel myCustomTick ] ]Specify style of the axis.
yAxis [ axisLineStyle [ ( "stroke", "red" ) ] ]Draws a horizontal grid.
horizontalGrid [ gridTickList [ 20 30 40 ] ]Draws a vertical grid.
verticalGrid [ gridTickList [ 10 40 90 ] ]Specify the styling for the grid.
verticalGrid [ gridStyle [ ( "stroke", "#cee0e2" ) ] ]Specify the styling for the grid.
verticalGrid [ gridTickList [ 200, 400, 600 ] ]Note: This will eventually be changed to a Maybe type and will default to align with whatever ticks are on your axis.
Represents the type which are allowed in the plots list of children.