The data accessors

A line chart can have the X axis as linear or time data.

type Accessor data
    = AccessorLinear (accessorLinear data)
    | AccessorTime (accessorTime data)

The accessor structure for x time lines.

The accessor structure for x linear lines.

The accessor constructor for x time lines.

Line.time (Line.AccessorTime .groupLabel .x .y)

The accessor constructor for x linear lines.

Line.linear (Line.AccessorLinear .groupLabel .x .y)

Initializes the line chart with a default config

data : List Data
data =
    [ { groupLabel = "A"
      , x = Time.millisToPosix 1579275175634
      , y = 10
      }
    , { groupLabel = "A"
      , x = Time.millisToPosix 1579285175634
      , y = 16
      }
    , { groupLabel = "B"
      , x = Time.millisToPosix 1579275175634
      , y = 13
      }
    , { groupLabel = "B"
      , x = Time.millisToPosix 1579285175634
      , y = 23
      }
    ]


accessor : Line.Accessor data
accessor =
    Line.time (Line.accessorTime .groupLabel .x .y)


Line.init
    { margin =
        { top = 10
        , right = 10
        , bottom = 30
        , left = 30
        }
    , width = 500
    , height = 200
    }
    |> Line.render (data, accessor)

Renders the line chart, after initialisation and customisation

Line.init requiredConfig
    |> Line.render ( data, accessor )

The required config, passed as an argument to the init function

Build an alternative table content for accessibility

⚠ This is still work in progress and only a basic table is rendered with this option. For now it is best to only use it with a limited number of data points.

Line.init requiredConfig
    |> Line.withTable
    |> Line.render ( data, accessor )

Sets the approximate number of ticks for the X axis

Defaults to elm-visualization Scale.ticks

Line.init requiredConfig
    |> Line.withXAxisTickCount 5
    |> Line.render ( data, accessor )

Sets the color palette for the chart.

palette =
    -- From elm-visualization
    Scale.Color.tableau10


Line.init requiredConfig
    |> Line.withColorPalette palette
    |> Line.render (data, accessor)

Sets an accessible title for the svg chart.

It defaults to an empty string. This shuld be set if no title nor description exists for the chart, for example in a sparkline.

Line.init required
    |> Line.withTitle "Line chart"
    |> Line.render ( data, accessor )

Sets an accessible, long-text description for the svg chart.

It defaults to an empty string. This shuld be set if no title nor description exists for the chart, for example in a sparkline.

Line.init requiredConfig
    |> Line.withDesc "This is an accessible chart, with a desc element"
    |> Line.render ( data, accessor )

Sets the tick formatting for the X axis

Defaults to elm-visualization Scale.tickFormat

Line.init requiredConfig
    |> Line.withXAxisTickFormat (FormatNumber.format { usLocale | decimals = 0 })
    |> Line.render ( data, accessor )

Explicitly sets the ticks for the X axis

Defaults to elm-visualization Scale.ticks

Line.init requiredConfig
    |> Line.withXTicks [ 1, 2, 3 ]
    |> Line.render ( data, accessor )

Sets the approximate number of ticks for the y axis

Defaults to Scale.ticks

Line.init requiredConfig
    |> Line.withYAxisTickCount 5
    |> Line.render ( data, accessor )

Sets the formatting for ticks in the y axis

Defaults to Scale.tickFormat

Line.init requiredConfig
    |> Line.withYAxisTickFormat (FormatNumber.format { usLocale | decimals = 0 })
    |> Line.render ( data, accessor )

Explicitly sets the ticks for the Y axis

Defaults to Scale.ticks

Line.init requiredConfig
    |> Line.withYAxisTicks [ 1, 2, 3 ]
    |> Line.render ( data, accessor )

Sets the line curve shape

Defaults to Shape.linearCurve

See https://package.elm-lang.org/packages/gampleman/elm-visualization/latest/Shape for more info.

Line.init requiredConfig
    |> Line.withCurve Shape.monotoneInXCurve
    |> Line.render ( data, accessor )

Hide the X aixs

The X axis depends from the layout: With a vertical layout the X axis is the horizontal axis. With a horizontal layout the X axis is the vertical axis.

Line.init requiredConfig
    |> Line.hideXAxis
    |> Line.render ( data, accessor )

Hide the Y aixs

The Y axis depends from the layout: With a vertical layout the Y axis is the vertical axis. With a horizontal layout the Y axis is the horizontal axis.

Line.init
    { margin = margin
    , width = width
    , height = height
    }
    |> Line.hideYAxis
    |> Line.render ( data, accessor )

Hide all axis

Line.init requiredConfig
    |> Line.hideAxis
    |> Line.render ( data, accessor )

Sets the Y domain of a time line chart

If not set, the domain is calculated from the data. If set on a linear line chart this setting will have no effect.

Line.init requiredConfig
    |> Line.withXTimeDomain ( Time.millisToPosix 1579275175634, 10 )
    |> Line.render ( data, accessor )

Sets the Y domain of a line chart

This is always a linear domain, not a time domain. If not set, the domain is calculated from the data. If set on a linear line chart this setting will have no effect.

Line.init required
    |> Line.withYDomain ( Time.millisToPosix 1579275175634, Time.millisToPosix 1579375175634 )
    |> Line.render ( data, accessor )

Sets the Y domain of a linear line chart

If not set, the domain is calculated from the data. If set on a linear line chart this setting will have no effect.

Line.init requiredConfig
    |> Line.withXLinearDomain ( 0, 10 )
    |> Line.render ( data, accessor )

Creates a stacked line chart.

It takes a direction: diverging or noDirection

Line.init requiredConfig
    |> Line.withStackedLayout
    |> Line.render ( data, accessor )

Creates a grouped line chart.

Line.init requiredConfig
    |> Line.withGroupedLayout
    |> Line.render ( data, accessor )

Pass a list of symbols to the line chart, one per data group. If the list is empty, no symbols are rendered.

Default value: []

defaultLayoutConfig
    |> withSymbols [ Circle, Corner, Triangle ]