This module contains attributes for editing elements in Chart
and Chart.Svg
. See
Chart
for usage examples.
Often a single attribute can change several different configurations, so the categories below are only guiding.
c -> c
width : Basics.Float -> { a | width : Basics.Float } -> { a | width : Basics.Float }
height : Basics.Float -> { a | height : Basics.Float } -> { a | height : Basics.Float }
attrs : a -> { x | attrs : a } -> { x | attrs : a }
htmlAttrs : a -> { x | htmlAttrs : a } -> { x | htmlAttrs : a }
events : x -> { a | events : x } -> { a | events : x }
margin : x -> { a | margin : x } -> { a | margin : x }
padding : x -> { a | padding : x } -> { a | padding : x }
range : x -> { a | range : x } -> { a | range : x }
domain : x -> { a | domain : x } -> { a | domain : x }
limits : x -> { a | limits : x } -> { a | limits : x }
lowest : Basics.Float -> (Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float) -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Change the lower bound of an axis.
CA.lowest -5 CA.orLower initial -- { initial | min = -5, max = 10 }
CA.lowest -5 CA.orHigher initial -- { initial | min = 0, max = 10 }
CA.lowest 2 CA.exactly initial -- { initial | min = 2, max = 10 }
CA.lowest 2 CA.less initial -- { initial | min = -2, max = 10 }
CA.lowest 3 CA.more initial -- { initial | min = 3, max = 10 }
where
initial : Chart.Svg.Axis
initial =
{ .. | min = 0, max = 10 }
highest : Basics.Float -> (Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float) -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Same as lowest
, but changes upper bound.
orLower : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
See lowest
for usage examples.
orHigher : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
See lowest
for usage examples.
exactly : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
See lowest
for usage examples.
more : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
See lowest
for usage examples.
less : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float
See lowest
for usage examples.
window : Basics.Float -> Basics.Float -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Set an axis to an exact window.
CA.window 2 5 initial -- { initial | min = 2, max = 5 }
where
initial : Axis
initial =
{ .. | min = 0, max = 10 }
likeData : Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Resets axis to fit data bounds.
zoom : Basics.Float -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Zoom with a certain percentage.
CA.range [ CA.zoom 150 ]
move : Basics.Float -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Offset entire range.
CA.move 5 initial -- { initial | min = 5, max = 15 }
where
initial : Axis
initial =
{ .. | min = 0, max = 10 }
centerAt : Basics.Float -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Center range/domain at certain point.
CA.centerAt 20 initial -- { initial | min = -30, max = 70 }
where
initial : Axis
initial =
{ .. | min = 0, max = 100 }
pad : Basics.Float -> Basics.Float -> Internal.Coordinates.Axis -> Internal.Coordinates.Axis
Add padding (in px) to range/domain.
CA.range [ CA.pad 5 10 ]
zero : Internal.Coordinates.Axis -> Basics.Float
Given an axis, find the value within it closest to zero.
CA.zero { dataMin = 0, dataMax = 10, min = 2, max = 5 } -- 2
CA.zero { dataMin = 0, dataMax = 10, min = -5, max = 5 } -- 0
CA.zero { dataMin = 0, dataMax = 10, min = -5, max = -2 } -- -2
middle : Internal.Coordinates.Axis -> Basics.Float
Get the middle value of your axis.
percent : Basics.Float -> Internal.Coordinates.Axis -> Basics.Float
Get the value at a certain percentage of the length of your axis.
fontSize : Basics.Int -> { a | fontSize : Maybe Basics.Int } -> { a | fontSize : Maybe Basics.Int }
uppercase : { a | uppercase : Basics.Bool } -> { a | uppercase : Basics.Bool }
format : x -> { a | format : Maybe x } -> { a | format : Maybe x }
position : x -> { a | position : x } -> { a | position : x }
alignLeft : { a | anchor : Maybe Internal.Svg.Anchor } -> { a | anchor : Maybe Internal.Svg.Anchor }
alignRight : { a | anchor : Maybe Internal.Svg.Anchor } -> { a | anchor : Maybe Internal.Svg.Anchor }
alignMiddle : { a | anchor : Maybe Internal.Svg.Anchor } -> { a | anchor : Maybe Internal.Svg.Anchor }
ellipsis : Basics.Float -> Basics.Float -> { a | ellipsis : Maybe { height : Basics.Float, width : Basics.Float } } -> { a | ellipsis : Maybe { height : Basics.Float, width : Basics.Float } }
Note: There is no SVG feature for ellipsis, so this turns labels into HTML.
amount : Basics.Int -> { a | amount : Basics.Int } -> { a | amount : Basics.Int }
flip : { a | flip : Basics.Bool } -> { a | flip : Basics.Bool }
pinned : x -> { a | pinned : x } -> { a | pinned : x }
ints : { a | generate : Internal.Svg.TickType } -> { a | generate : Internal.Svg.TickType }
times : Time.Zone -> { a | generate : Internal.Svg.TickType } -> { a | generate : Internal.Svg.TickType }
x : Basics.Float -> { a | x : Basics.Float } -> { a | x : Basics.Float }
y : Basics.Float -> { a | y : Basics.Float } -> { a | y : Basics.Float }
x1 : x -> { a | x1 : Maybe x } -> { a | x1 : Maybe x }
y1 : Basics.Float -> { a | y1 : Maybe Basics.Float } -> { a | y1 : Maybe Basics.Float }
x2 : x -> { a | x2 : Maybe x } -> { a | x2 : Maybe x }
y2 : Basics.Float -> { a | y2 : Maybe Basics.Float } -> { a | y2 : Maybe Basics.Float }
x2Svg : x -> { a | x2Svg : Maybe x } -> { a | x2Svg : Maybe x }
y2Svg : x -> { a | y2Svg : Maybe x } -> { a | y2Svg : Maybe x }
length : Basics.Float -> { a | length : Basics.Float } -> { a | length : Basics.Float }
moveLeft : Basics.Float -> { a | xOff : Basics.Float } -> { a | xOff : Basics.Float }
moveRight : Basics.Float -> { a | xOff : Basics.Float } -> { a | xOff : Basics.Float }
moveUp : Basics.Float -> { a | yOff : Basics.Float } -> { a | yOff : Basics.Float }
moveDown : Basics.Float -> { a | yOff : Basics.Float } -> { a | yOff : Basics.Float }
hideOverflow : { a | hideOverflow : Basics.Bool } -> { a | hideOverflow : Basics.Bool }
border : String -> { a | border : String } -> { a | border : String }
borderWidth : Basics.Float -> { a | borderWidth : Basics.Float } -> { a | borderWidth : Basics.Float }
color : String -> { a | color : String } -> { a | color : String }
opacity : Basics.Float -> { a | opacity : Basics.Float } -> { a | opacity : Basics.Float }
highlight : Basics.Float -> { a | highlight : Basics.Float } -> { a | highlight : Basics.Float }
highlightWidth : Basics.Float -> { a | highlightWidth : Basics.Float } -> { a | highlightWidth : Basics.Float }
highlightColor : String -> { a | highlightColor : String } -> { a | highlightColor : String }
background : String -> { a | background : String } -> { a | background : String }
noArrow : { a | arrow : Basics.Bool } -> { a | arrow : Basics.Bool }
rotate : Basics.Float -> { a | rotate : Basics.Float } -> { a | rotate : Basics.Float }
striped : List (Attribute Internal.Svg.Pattern) -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float } -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float }
dotted : List (Attribute Internal.Svg.Pattern) -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float } -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float }
gradient : List String -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float } -> { a | design : Maybe Internal.Svg.Design, opacity : Basics.Float }
ungroup : { a | grouped : Basics.Bool } -> { a | grouped : Basics.Bool }
roundTop : Basics.Float -> { a | roundTop : Basics.Float } -> { a | roundTop : Basics.Float }
roundBottom : Basics.Float -> { a | roundBottom : Basics.Float } -> { a | roundBottom : Basics.Float }
spacing : Basics.Float -> { a | spacing : Basics.Float } -> { a | spacing : Basics.Float }
area : Basics.Float -> { a | area : Basics.Float, method : Maybe Internal.Svg.Method } -> { a | area : Basics.Float, method : Maybe Internal.Svg.Method }
size : Basics.Float -> { a | size : Basics.Float } -> { a | size : Basics.Float }
dashed : x -> { a | dashed : x } -> { a | dashed : x }
break : { a | break : Basics.Bool } -> { a | break : Basics.Bool }
tickLength : Basics.Float -> { a | tickLength : Basics.Float } -> { a | tickLength : Basics.Float }
tickDirection : Basics.Float -> { a | tickDirection : Basics.Float } -> { a | tickDirection : Basics.Float }
linear : { a | method : Maybe Internal.Svg.Method } -> { a | method : Maybe Internal.Svg.Method }
monotone : { a | method : Maybe Internal.Svg.Method } -> { a | method : Maybe Internal.Svg.Method }
stepped : { a | method : Maybe Internal.Svg.Method } -> { a | method : Maybe Internal.Svg.Method }
circle : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
triangle : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
square : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
diamond : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
plus : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
cross : { a | shape : Maybe Internal.Svg.Shape } -> { a | shape : Maybe Internal.Svg.Shape }
onTop : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
onBottom : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
onRight : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
onLeft : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
onLeftOrRight : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
onTopOrBottom : { a | direction : Maybe Internal.Svg.Direction } -> { a | direction : Maybe Internal.Svg.Direction }
offset : Basics.Float -> { a | offset : Basics.Float } -> { a | offset : Basics.Float }
focal : (Internal.Coordinates.Position -> Internal.Coordinates.Position) -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
topLeft : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
topRight : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
topCenter : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
bottomLeft : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
bottomRight : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
bottomCenter : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
leftCenter : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
rightCenter : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
top : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
bottom : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
left : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
right : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
center : { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) } -> { a | focal : Maybe (Internal.Coordinates.Position -> Internal.Coordinates.Position) }
title : x -> { a | title : x } -> { a | title : x }
row : { a | alignment : Internal.Svg.Alignment } -> { a | alignment : Internal.Svg.Alignment }
column : { a | alignment : Internal.Svg.Alignment } -> { a | alignment : Internal.Svg.Alignment }
noGrid : { a | grid : Basics.Bool } -> { a | grid : Basics.Bool }
withGrid : { a | grid : Basics.Bool } -> { a | grid : Basics.Bool }
dotGrid : { a | dotGrid : Basics.Bool } -> { a | dotGrid : Basics.Bool }
pink : String
purple : String
blue : String
green : String
orange : String
turquoise : String
red : String
magenta : String
brown : String
mint : String
yellow : String
gray : String
darkYellow : String
darkBlue : String
darkGray : String
labelGray : String