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.
{ 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
{ 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
{ 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
{ 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
{ 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
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
formatTime : Time.Zone -> Intervals.Time -> String
{ 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
{ 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
{ 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
{ 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
{ 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
{ 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.
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 [] [ .. ]
{ 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.
{ 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.
{ x1 : Basics.Float
, x2 : Basics.Float
, y1 : Basics.Float
, y2 : Basics.Float
}
{ 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.
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.