terezka / charts / 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 Basics.Float
, x2 : Maybe Basics.Float
, y1 : Maybe Basics.Float
, y2 : Maybe Basics.Float
, x2Svg : Maybe Basics.Float
, y2Svg : Maybe Basics.Float
, xOff : Basics.Float
, yOff : Basics.Float
, tickLength : Basics.Float
, tickDirection : Basics.Float
, color : String
, width : Basics.Float
, dashed : List Basics.Float
, opacity : Basics.Float
, break : Basics.Bool
, flip : Basics.Bool
, hideOverflow : Basics.Bool
, attrs : List (Svg.Attribute Basics.Never) 
}

line : Plane -> List (Chart.Attributes.Attribute Line) -> Svg msg

Rectangels


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

rect : Plane -> List (Chart.Attributes.Attribute Rect) -> Svg msg

Arrows


type alias Arrow =
{ xOff : Basics.Float
, yOff : Basics.Float
, color : String
, width : Basics.Float
, length : Basics.Float
, rotate : Basics.Float
, attrs : List (Svg.Attribute Basics.Never) 
}

arrow : Plane -> List (Chart.Attributes.Attribute Arrow) -> Point -> Svg msg

Labels


type alias Label =
{ xOff : Basics.Float
, yOff : Basics.Float
, border : String
, borderWidth : Basics.Float
, fontSize : Maybe Basics.Int
, color : String
, anchor : Maybe Internal.Svg.Anchor
, rotate : Basics.Float
, uppercase : Basics.Bool
, hideOverflow : Basics.Bool
, attrs : List (Svg.Attribute Basics.Never)
, ellipsis : Maybe { width : Basics.Float
, height : Basics.Float } 
}

label : Plane -> List (Chart.Attributes.Attribute Label) -> List (Svg msg) -> Point -> Svg msg

Ticks


type alias Tick =
{ color : String
, width : Basics.Float
, length : Basics.Float
, attrs : List (Svg.Attribute Basics.Never) 
}

xTick : Plane -> List (Chart.Attributes.Attribute Tick) -> Point -> Svg msg

yTick : Plane -> List (Chart.Attributes.Attribute Tick) -> Point -> Svg msg

Generation


type alias Generator a =
Internal.Svg.Generator a

generate : Basics.Int -> Generator a -> Axis -> List a

Generate a "nice" set of type a.

floats : Generator Basics.Float

ints : Generator Basics.Int

times : Time.Zone -> Generator Intervals.Time

Formatting

formatTime : Time.Zone -> Intervals.Time -> String

Series

Bars


type alias Bar =
{ roundTop : Basics.Float
, roundBottom : Basics.Float
, color : String
, border : String
, borderWidth : Basics.Float
, opacity : Basics.Float
, design : Maybe Internal.Svg.Design
, attrs : List (Svg.Attribute Basics.Never)
, highlight : Basics.Float
, highlightWidth : Basics.Float
, highlightColor : String 
}

bar : Plane -> List (Chart.Attributes.Attribute Bar) -> Position -> Svg msg

Dots


type alias Dot =
{ color : String
, opacity : Basics.Float
, size : Basics.Float
, border : String
, borderWidth : Basics.Float
, highlight : Basics.Float
, highlightWidth : Basics.Float
, highlightColor : String
, shape : Maybe Internal.Svg.Shape
, hideOverflow : Basics.Bool 
}

dot : Plane -> (data -> Basics.Float) -> (data -> Basics.Float) -> List (Chart.Attributes.Attribute Dot) -> data -> Svg msg

Interpolations


type alias Interpolation =
{ method : Maybe Internal.Svg.Method
, color : String
, width : Basics.Float
, opacity : Basics.Float
, design : Maybe Internal.Svg.Design
, dashed : List Basics.Float
, attrs : List (Svg.Attribute Basics.Never) 
}

interpolation : Plane -> (data -> Basics.Float) -> (data -> Maybe Basics.Float) -> List (Chart.Attributes.Attribute Interpolation) -> List data -> Svg msg

area : Plane -> (data -> Basics.Float) -> Maybe (data -> Maybe Basics.Float) -> (data -> Maybe Basics.Float) -> List (Chart.Attributes.Attribute Interpolation) -> List data -> Svg msg

Legends


type alias Legends msg =
{ alignment : Internal.Svg.Alignment
, anchor : Maybe Internal.Svg.Anchor
, xOff : Basics.Float
, yOff : Basics.Float
, spacing : Basics.Float
, background : String
, border : String
, borderWidth : Basics.Float
, htmlAttrs : List (Html.Attribute msg) 
}

legendsAt : Plane -> Basics.Float -> Basics.Float -> List (Chart.Attributes.Attribute (Legends msg)) -> List (Html msg) -> Html msg


type alias Legend msg =
{ xOff : Basics.Float
, yOff : Basics.Float
, width : Basics.Float
, height : Basics.Float
, fontSize : Maybe Basics.Int
, color : String
, spacing : Basics.Float
, title : String
, htmlAttrs : List (Html.Attribute msg) 
}

lineLegend : List (Chart.Attributes.Attribute (Legend msg)) -> List (Chart.Attributes.Attribute Interpolation) -> List (Chart.Attributes.Attribute Dot) -> Html msg

barLegend : List (Chart.Attributes.Attribute (Legend msg)) -> List (Chart.Attributes.Attribute Bar) -> Html msg

Tooltips


type alias Tooltip =
{ direction : Maybe Internal.Svg.Direction
, focal : Maybe (Position -> Position)
, height : Basics.Float
, width : Basics.Float
, offset : Basics.Float
, arrow : Basics.Bool
, border : String
, background : String 
}

tooltip : Plane -> Position -> List (Chart.Attributes.Attribute Tooltip) -> List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Html msg

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

Positioning

position : Plane -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Svg.Attribute msg

Postion arbritary SVG.

S.g [ position plane x y xOff yOff ] [ ... ]

positionHtml : Plane -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> List (Html.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 : Basics.Float
, marginMin : Basics.Float
, marginMax : Basics.Float
, dataMin : Basics.Float
, dataMax : Basics.Float
, min : Basics.Float
, max : Basics.Float 
}

Information about your range or domain.


type alias Position =
{ x1 : Basics.Float
, x2 : Basics.Float
, y1 : Basics.Float
, y2 : Basics.Float 
}


type alias Point =
{ x : Basics.Float, y : Basics.Float }

fromSvg : Plane -> Point -> Point

Translate a SVG coordinate to cartesian.

fromCartesian : Plane -> Point -> Point

Translate a cartesian coordinate to SVG.

lengthInSvgX : Plane -> Basics.Float -> Basics.Float

How long is a cartesian x length in SVG units?

lengthInSvgY : Plane -> Basics.Float -> Basics.Float

How long is a cartesian y length in SVG units?

lengthInCartesianX : Plane -> Basics.Float -> Basics.Float

How long is a SVG x length in cartesian units?

lengthInCartesianY : Plane -> Basics.Float -> Basics.Float

How long is a SVG y length in cartesian units?

hideOverflow : Plane -> Svg.Attribute Basics.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 : Basics.Float -> (a -> Position) -> List a -> Plane -> Point -> List a

Like getNearest, but include searched radius in first argument.

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

Like getWithin, but only searches x coordinates.