mthiems / elm-charts-3 / Chart.Attributes

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.


type alias Attribute c =
c -> c

Container

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 }

Limits

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.

Labels

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.

Axis

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 }

Coordinates

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 }

Decoration

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 }

Bar

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 }

Lines

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 }

Tooltip

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) }

Legends

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 }

Grid

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 }

Colors

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