Axis

The axis component renders human-readable reference marks for scales. This alleviates one of the more tedious tasks in visualizing data.

Renders an Axis based on a Scale.

view =
  svg []
    [ g [ class [ "axis" ], transform [ Translate 0 300 ] ]
      [ Axis.left [ tickCount 10] myScale
      ]
    [

Regardless of orientation, axes are always rendered at the origin. To change the position of the axis with respect to the chart, specify a transform attribute on the containing element.

type alias RenderableScale a domain range value =

Scale

{ a

| ticks : domain -> Int -> List value

, domain : domain

, tickFormat : domain -> Int -> value -> String

, convert : domain -> range -> value -> Float

, range : range

, rangeExtent : domain -> range -> ( Float, Float )

}

Axes are rendered based on a Scale.

Currently only continuous (including time), quantize and band (via the toRenderable function) scales are supported.

left :

List (Attribute value)

-> RenderableScale a domain range value

-> Svg msg

A left oriented axis. In this orientation, ticks are drawn to the left of the vertical domain path.

right :

List (Attribute value)

-> RenderableScale a domain range value

-> Svg msg

A right oriented axis. In this orientation, ticks are drawn to the right of the vertical domain path.

bottom :

List (Attribute value)

-> RenderableScale a domain range value

-> Svg msg

A bottom oriented axis. In this orientation, ticks are drawn below the horizontal domain path.

top :

List (Attribute value)

-> RenderableScale a domain range value

-> Svg msg

A top oriented axis. In this orientation, ticks are drawn above the horizontal domain path.

Customizing the axis

The elements created by the axis are considered part of its public API. You can apply external stylesheets to customize the axis appearance. An axis consists of a path element of class “domain” representing the extent of the scale’s domain, followed by transformed g elements of class “tick” representing each of the scale’s ticks. Each tick has a line element to draw the tick line, and a text element for the tick label. For example, here is a typical bottom-oriented axis:

<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path>
  <g class="tick" opacity="1" transform="translate(0,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="translate(176,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="translate(352,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="translate(528,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="translate(704,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="translate(880,0)">
    <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
    <text fill="#000" y="9" x="0.5" dy="0.71em">1.0</text>
  </g>
</g>

type Attribute data

ticks : List data -> Attribute data

Pass a list of ticks to be rendered explicitely. Defaults to Scale.ticks. Useful when you want to render the data points as ticks.

tickFormat : (data -> String) -> Attribute data

A formatting function for the tick marks. Defaults to Scale.tickFormat.

tickCount : Int -> Attribute data

How many tickmarks to approximately generate. Defaults to 10.

tickSizeInner : Float -> Attribute data

The inner tick size controls the length of the tick lines, offset from the native position of the axis. Defaults to 6.

tickSizeOuter : Float -> Attribute data

The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Thus, the “outer ticks” are not actually ticks but part of the domain path, and their position is determined by the associated scale’s domain extent. Thus, outer ticks may overlap with the first or last inner tick. An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line. Defaults to 6.

tickPadding : Float -> Attribute data

Padding controls the space between tick marks and tick labels. Defaults to 3.

gampleman/elm-visualization/2.1.1

Axis

Customizing the axis

Modules