Let chart scale to provided viewport. Use in combination with e.g. Browser.Dom.getViewportOf.

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 }

Same as lowest, but changes upper bound.

See lowest for usage examples.

See lowest for usage examples.

See lowest for usage examples.

See lowest for usage examples.

See lowest for usage examples.

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 }

Resets axis to fit data bounds.

Zoom with a certain percentage.

CA.range [ CA.zoom 150 ]

Offset entire range.

CA.move 5 initial   -- { initial | min = 5, max = 15 }

where

initial : Axis
initial =
  { .. | min = 0, max = 10 }

Center range/domain at certain point.

CA.centerAt 20 initial -- { initial | min = -30, max = 70 }

where

initial : Axis
initial =
  { .. | min = 0, max = 100 }

Add padding (in px) to range/domain.

CA.range [ CA.pad 5 10 ]

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

Get the middle value of your axis.

Get the value at a certain percentage of the length of your axis.

Note: There is no SVG feature for ellipsis, so this turns labels into HTML.