PackagesReroutesAboutlamdera.com

terezka/charts/9.1.0

NOTE: the latest version is 20.0.1

READMEAboutVersionsSourceModules

Svg.Chart

This module contains low-level SVG plotting elements.

Series

Sizing

static : Plane -> List (Attribute msg)

Set the size of your chart.

responsive : Plane -> Attribute msg

Set the dimensions of your chart, but let it respond to size changes in parent.

frame : String -> Plane -> Svg msg

Create an id to use in a clip path to prevent elements from going into your margins.

svg []
  [ frame "some-id" plane
  , g [ clipPath "url(#some-id)" ] [ stuffThatShouldntGoIntoTheMargin ]
  ]

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)
-> (data -> 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)
-> (data -> Dot msg)
-> List data
-> Svg msg

Series with linear interpolation.

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

Area series with linear interpolation.

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

Series with monotone interpolation.

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

Area series with monotone interpolation.

Bar charts

type alias Group msg =
{ label : String
, spacing : Float
, tickLength : Float
, tickWidth : Float
, bars : List (Bar msg)
}
bars : Plane -> List (Group msg) -> Svg msg
type alias Bin msg =
{ label : String
, start : Float
, end : Float
, spacing : Float
, tickLength : Float
, tickWidth : Float
, bars : List (Bar msg)
}
type alias Bar msg =
{ attributes : List (Attribute msg)
, label : Maybe String
, rounded : Float
, roundBottom : Bool
, width : Float
, value : Float
}
histogram : Plane -> List (Bin msg) -> Svg msg

Straight lines

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

Renders a line.

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

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

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

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

myYAxisOrGridLine : Svg msg
myYAxisOrGridLine =
  yAxis plane [] xPosition
xArrow : Plane -> String -> Float -> Float -> Float -> Float -> Svg msg

Place an arrow pointing to the right somewhere.

  xArrow plane color x y xOff yOff
yArrow : Plane -> String -> Float -> Float -> Float -> Float -> Svg msg

Place an arrow pointing up somewhere.

  yArrow plane color x y xOff yOff
xGrid : Plane -> List (Attribute msg) -> Float -> Svg msg

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

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

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

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 -> Float -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the horizontal axis.

xTicks : Plane -> Float -> 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 -> Float -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the vertical axis.

yTicks : Plane -> Float -> 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

Positioning anything

position : Plane -> Float -> Float -> Float -> Float -> Attribute msg

Place some SVG on specific coordinates.

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

Place some Html on specific coordinates. You must wrap your chart in container for it to work! Remember also to put your html elements outside your svg element, otherwise they won't work!

  positionHtml plane x y xOff yOff
    [ style "font-size" "14px" ]
    [ text "Hello!" ]

Events

container : Plane -> List (Attribute msg) -> List (Html msg) -> Html msg

Container for your chart, in case you use the eventCatcher. Without this, your coordinates from the events will be wrong!

eventCatcher : Plane -> List (Attribute msg) -> Svg msg
decodePoint : Plane -> (Plane -> Point -> msg) -> Decoder msg

Decode position of mouse when tracking events. The Plane may change due to size changes of the viewport, so make sure to use the one given in the second argument. Also, make sure to wrap your chart in container otherwise your read coordinates maybe wrong!

type alias Point =
{ x : Float
, y : Float
}
toPoints : (data -> Float) -> (data -> Float) -> List data -> List Point
type alias DataPoint data =
{ org : data
, point : Point
}
toDataPoints : (data -> Float) -> (data -> Float) -> List data -> List (DataPoint data)
getNearest : List (DataPoint data) -> Plane -> Point -> Maybe data

Get the data coordinates nearest to the event. Returns Nothing if you have no data showing.

getNearestX : List (DataPoint data) -> Plane -> Point -> List data

Get the data coordinates horizontally nearest to the event.

getWithin : Float -> List (DataPoint data) -> Plane -> Point -> Maybe data

Get the data coordinates nearest of the event within the radius you provide in the first argument. Returns Nothing if you have no data showing.

getWithinX : Float -> List (DataPoint data) -> Plane -> Point -> List data

Finds the data coordinates horizontally nearest to the event, within the distance you provide in the first argument.

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

A basic tooltip.

  tooltip plane x y
    [ style "font-size" "14px" ]
    [ Html.text "I'm a tooltip!" ]
isXPastMiddle : Plane -> Float -> Bool

Is x past the middle of the chart?

middleOfY : Plane -> Float

Get the midmost y coordinate.

middleOfX : Plane -> Float

Get the midmost x coordinate.

Modules

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