PackagesReroutesAboutlamdera.com

terezka/charts/20.0.1

READMEAboutVersionsSourceModules

Chart.Svg

Render plain SVG chart elements!

If the options in the Chart module does not fit your needs, perhaps you need to render some custom SVG. This is the low level SVG helpers I use in the library, and you can use them however you'd like too. You can embed your own SVG into your chart by using the Chart.svg and Chart.svgAt functions.

import Chart as C
import Chart.Svg as CS
import Svg as S


view : Html msg
view =
  C.chart []
    [ C.svg <| \plane ->
        CS.label plane [] [ S.text "my custom label" ] { x = 5, y = 5 }
    ]

Most of the configuration of these functions are directly parallel to those of Chart, except you need to pass a Plane type in the first argument.

You can see what attributes are applicable given their configuration record.

Line

type alias Line =
{ x1 : Maybe Float
, x2 : Maybe Float
, y1 : Maybe Float
, y2 : Maybe Float
, x2Svg : Maybe Float
, y2Svg : Maybe Float
, xOff : Float
, yOff : Float
, tickLength : Float
, tickDirection : Float
, color : String
, width : Float
, dashed : List Float
, opacity : Float
, break : Bool
, flip : Bool
, hideOverflow : Bool
, attrs : List (Attribute Never)
}
line : Plane -> List (Attribute Line) -> Svg msg

Rectangels

type alias Rect =
{ x1 : Maybe Float
, x2 : Maybe Float
, y1 : Maybe Float
, y2 : Maybe Float
, color : String
, border : String
, borderWidth : Float
, opacity : Float
, hideOverflow : Bool
, attrs : List (Attribute Never)
}
rect : Plane -> List (Attribute Rect) -> Svg msg

Arrows

type alias Arrow =
{ xOff : Float
, yOff : Float
, color : String
, width : Float
, length : Float
, rotate : Float
, attrs : List (Attribute Never)
}
arrow : Plane -> List (Attribute Arrow) -> Point -> Svg msg

Labels

type alias Label =
{ xOff : Float
, yOff : Float
, border : String
, borderWidth : Float
, fontSize : Maybe Int
, color : String
, anchor : Maybe Anchor
, rotate : Float
, uppercase : Bool
, hideOverflow : Bool
, attrs : List (Attribute Never)
, ellipsis :
Maybe
{ width : Float
, height : Float
}
}
label : Plane -> List (Attribute Label) -> List (Svg msg) -> Point -> Svg msg

Ticks

type alias Tick =
{ color : String
, width : Float
, length : Float
, attrs : List (Attribute Never)
}
xTick : Plane -> List (Attribute Tick) -> Point -> Svg msg
yTick : Plane -> List (Attribute Tick) -> Point -> Svg msg

Generation

type alias Generator a =
Generator a
generate : Int -> Generator a -> Axis -> List a

Generate a "nice" set of type a.

floats : Generator Float
ints : Generator Int
times : Zone -> Generator Time

Formatting

formatTime : Zone -> Time -> String

Series

Bars

type alias Bar =
{ roundTop : Float
, roundBottom : Float
, color : String
, border : String
, borderWidth : Float
, opacity : Float
, design : Maybe Design
, attrs : List (Attribute Never)
, highlight : Float
, highlightWidth : Float
, highlightColor : String
}
bar : Plane -> List (Attribute Bar) -> Position -> Svg msg

Dots

type alias Dot =
{ color : String
, opacity : Float
, size : Float
, border : String
, borderWidth : Float
, highlight : Float
, highlightWidth : Float
, highlightColor : String
, shape : Maybe Shape
, hideOverflow : Bool
}
dot :
Plane
-> (data -> Float)
-> (data -> Float)
-> List (Attribute Dot)
-> data
-> Svg msg

Interpolations

type alias Interpolation =
{ method : Maybe Method
, color : String
, width : Float
, opacity : Float
, design : Maybe Design
, dashed : List Float
, attrs : List (Attribute Never)
}
Plane
-> (data -> Float)
-> (data -> Maybe Float)
-> List (Attribute Interpolation)
-> List data
-> Svg msg
Plane
-> (data -> Float)
-> Maybe (data -> Maybe Float)
-> (data -> Maybe Float)
-> List (Attribute Interpolation)
-> List data
-> Svg msg

Legends

type alias Legends msg =
{ alignment : Alignment
, anchor : Maybe Anchor
, xOff : Float
, yOff : Float
, spacing : Float
, background : String
, border : String
, borderWidth : Float
, htmlAttrs : List (Attribute msg)
}
Plane
-> Float
-> Float
-> List (Attribute (Legends msg))
-> List (Html msg)
-> Html msg
type alias Legend msg =
{ xOff : Float
, yOff : Float
, width : Float
, height : Float
, fontSize : Maybe Int
, color : String
, spacing : Float
, title : String
, htmlAttrs : List (Attribute msg)
}
List (Attribute (Legend msg))
-> List (Attribute Interpolation)
-> List (Attribute Dot)
-> Html msg
barLegend : List (Attribute (Legend msg)) -> List (Attribute Bar) -> Html msg

Tooltips

type alias Tooltip =
{ direction : Maybe Direction
, focal : Maybe (Position -> Position)
, height : Float
, width : Float
, offset : Float
, arrow : Bool
, border : String
, background : String
}
Plane
-> Position
-> List (Attribute Tooltip)
-> List (Attribute Never)
-> List (Html Never)
-> Html msg

Like Chart.tooltip, except in the second argument you give position directly instead of item.

Positioning

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

Postion arbritary SVG.

S.g [ position plane x y xOff yOff ] [ ... ]
Plane
-> Float
-> Float
-> Float
-> Float
-> List (Attribute msg)
-> List (Html msg)
-> Html msg

Postion arbritary HTML.

positionHtml plane x y xOff yOff [] [ .. ]

Working with the coordinate system

type alias Plane =
{ x : Axis
, y : Axis
}

This is the key information about the coordinate system of your chart. Using this you'll be able to translate cartesian coordinates into SVG ones and back.

type alias Axis =
{ length : Float
, marginMin : Float
, marginMax : Float
, dataMin : Float
, dataMax : Float
, min : Float
, max : Float
}

Information about your range or domain.

  • dataMin is the lowest value of your data
  • dataMax is the highest value of your data
  • min is the lowest value of your axis
  • max is the highest value of your axis
type alias Position =
{ x1 : Float
, x2 : Float
, y1 : Float
, y2 : Float
}
type alias Point =
{ x : Float
, y : Float
}
fromSvg : Plane -> Point -> Point

Translate a SVG coordinate to cartesian.

fromCartesian : Plane -> Point -> Point

Translate a cartesian coordinate to SVG.

lengthInSvgX : Plane -> Float -> Float

How long is a cartesian x length in SVG units?

lengthInSvgY : Plane -> Float -> Float

How long is a cartesian y length in SVG units?

lengthInCartesianX : Plane -> Float -> Float

How long is a SVG x length in cartesian units?

lengthInCartesianY : Plane -> Float -> Float

How long is a SVG y length in cartesian units?

hideOverflow : Plane -> Attribute Never

Hide overflow. Sometimes your element might reach outside the chart area. This will cut the excess.

Seaching

getNearest : (a -> Position) -> List a -> Plane -> Point -> List a

Search a list for the nearest item. Example use:

C.withBars <| \plane bars ->
  let closest = CS.getNearest (CE.getPosition plane) bars plane { x = 2, y = 4 } in
  [ C.each closest <| \_ bar -> [ C.label [] [ S.text "nearest" ] (CE.getBottom plane bar) ]
  ]
getNearestX : (a -> Position) -> List a -> Plane -> Point -> List a

Like getNearest, but only searches x coordinates.

getWithin : Float -> (a -> Position) -> List a -> Plane -> Point -> List a

Like getNearest, but include searched radius in first argument.

getWithinX : Float -> (a -> Position) -> List a -> Plane -> Point -> List a

Like getWithin, but only searches x coordinates.

Modules

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