PackagesReroutesAboutlamdera.com

terezka/charts/4.0.0

NOTE: the latest version is 20.0.1

READMEAboutVersionsSourceModules

Svg.Chart

This module contains higher-level SVG plotting elements.

Series

Dots

type alias Dot msg =
Plane -> Float -> Float -> Svg msg
clear : Plane -> Float -> Float -> Svg msg

A dot without visual representation.

empty : Float -> Int -> Shape -> String -> Dot msg

Make a shape with a white core.

someDot : Svg msg
someDot =
  empty radius width circle "blue" plane x y
disconnected : Float -> Int -> Shape -> String -> Dot msg

Make a shape with a white border.

someDot : Svg msg
someDot =
  disconnected radius width circle "blue" plane x y
aura : Float -> Int -> Float -> Shape -> String -> Dot msg

Make a shape with a little translucent border.

someDot : Svg msg
someDot =
  aura radius width opacity circle "blue" plane x y
full : Float -> Shape -> String -> Dot msg

Make a regular shape.

someDot : Svg msg
someDot =
  full radius circle "blue" plane x y
circle : Shape
triangle : Shape
square : Shape
diamond : Shape
plus : Shape
cross : Shape

Interpolation

Plane
-> (data -> Float)
-> (data -> Float)
-> Dot msg
-> List data
-> Svg msg

Series with no interpolation.

someScatter : Svg msg
someScatter =
  scatter plane .x .y (full 6 circle "blue") points
Plane
-> (data -> Float)
-> (data -> Float)
-> List (Attribute msg)
-> Dot msg
-> List data
-> Svg msg

Series with linear interpolation.

Plane
-> (data -> Float)
-> (data -> Float)
-> List (Attribute msg)
-> Dot msg
-> List data
-> Svg msg

Area series with linear interpolation.

Plane
-> (data -> Float)
-> (data -> Float)
-> List (Attribute msg)
-> Dot msg
-> List data
-> Svg msg

Series with monotone interpolation.

Plane
-> (data -> Float)
-> (data -> Float)
-> List (Attribute msg)
-> Dot msg
-> List data
-> Svg msg

Area series with monotone interpolation.

Bar charts

type Bar msg
bar : List (Attribute msg) -> Float -> Bar msg
bars : Plane -> Float -> List (data -> Bar msg) -> List data -> Svg msg

You can draw a bar chart like this:

main : Svg msg
main =
  svg
    [ width (String.fromFloat plane.x.length)
    , height (String.fromFloat plane.y.length)
    ]
    [ bars plane 0.8
        [ bar [ fill "red" ] << Tuple.first
        , bar [ fill "blue" ] << Tuple.second
        ]
        [ ( 2, 3 ), ( 5, 1 ), ( 1, 5 ) ]
    ]

Note on width: The width takes catersian units, however, should you have a width in SVG units, you can use Svg.Coordinates.scaleCartesian to translate it into cartesian units.

Plane
-> (data -> Float)
-> Float
-> (data -> Bar msg)
-> List data
-> Svg msg

Make a histogram.

main : Svg msg
main =
  svg
    [ width (String.fromFloat plane.x.length)
    , height (String.fromFloat plane.y.length)
    ]
    [ histogram plane 1 1 (bar [ stroke blueStroke, fill blueFill ]) [ 1, 2, 3, 6, 8, 9, 6, 4, 2, 1 ] ]

Straight lines

Plane
-> List (Attribute msg)
-> Float
-> Float
-> Float
-> Float
-> Svg msg

Renders a line.

myLine : Svg msg
myLine =
  horizontal plane [ stroke "pink" ] x0 y0 x1 y1
fullHorizontal : Plane -> List (Attribute msg) -> Float -> Svg msg

Renders a horizontal line with the full length of the range.

myXAxisOrGridLine : Svg msg
myXAxisOrGridLine =
  fullHorizontal plane [] yPosition
fullVertical : Plane -> List (Attribute msg) -> Float -> Svg msg

Renders a vertical line with the full length of the domain.

myYAxisOrGridLine : Svg msg
myYAxisOrGridLine =
  fullVertical plane [] xPosition
horizontal : Plane -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg

Renders a horizontal line.

myLine : Svg msg
myLine =
  horizontal plane [ stroke "pink" ] y x0 x1
vertical : Plane -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg

Renders a vertical line.

myLine : Svg msg
myLine =
  vertical plane [ stroke "pink" ] x y0 y1

Ticks

ProTip: Passing a negative value as the height/width of a tick renders it mirrored on the other side of the axis!

xTick : Plane -> Int -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the horizontal axis.

xTicks : Plane -> Int -> List (Attribute msg) -> Float -> List Float -> Svg msg

Renders ticks for the horizontal axis.

horizontalTicks : Svg msg
horizontalTicks =
  xTicks plane height [ stroke "pink" ] axisYCoordinate tickPositions
yTick : Plane -> Int -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the vertical axis.

yTicks : Plane -> Int -> List (Attribute msg) -> Float -> List Float -> Svg msg

Renders ticks for the vertical axis.

verticalTicks : Svg msg
verticalTicks =
  yTicks plane width [ stroke "pink" ] axisXCoordinate tickPositions

Labels

List (Attribute msg)
-> (data -> Float)
-> (data -> String)
-> Plane
-> Float
-> data
-> Svg msg

Renders a label for the horizontal axis.

horizontalLabel : Svg msg
horizontalLabel =
  xLabel "blue" .timestamp format plane y datum
xLabels : Plane -> (Plane -> Float -> data -> Svg msg) -> Float -> List data -> Svg msg

Renders labels for the horizontal axis.

horizontalLabels : Svg msg
horizontalLabels =
  xLabels plane (xLabel "blue" .timestamp format) axisYCoordinate data
List (Attribute msg)
-> (data -> Float)
-> (data -> String)
-> Plane
-> Float
-> data
-> Svg msg

Renders a label for the vertical axis.

verticalLabel : Svg msg
verticalLabel =
  yLabel "blue" .age format plane x y
yLabels : Plane -> (Plane -> Float -> data -> Svg msg) -> Float -> List data -> Svg msg

Renders labels for the vertical axis.

verticalLabels : Svg msg
verticalLabels =
  yLabels plane (yLabel "blue" .age format) axisXCoordinate data

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera