The data accessors

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

type Accessor data
    = AccessorContinuous (accessorContinuous data)
    | AccessorTime (accessorTime data)

An alias for AccessorContinuous

The accessor structure for x continuous lines.

The accessor structure for x time lines.

The accessor constructor for x continuous lines.

Line.continuous (Line.AccessorContinuous .groupLabel .x .y)

An alias for Line.continuous

Line.cont (Line.AccessorCont .groupLabel .x .y)

The accessor constructor for x time lines.

Line.time (Line.AccessorTime .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 optional customisations.

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

The Config opaque type

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

{ margin =
    { top = Float
    , right = Float
    , bottom = Float
    , left = Float
    }
, width = Float
, height = Float
}

Draw the line chart as an area

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

Sets the bottom padding for the chart component. The higher the padding, the bigger the gap between the chart and the axis.

Line.init requiredConfig
    |> Line.withBottomPadding 4
    |> 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 the line curve shape

Defaults to Shape.continuousCurve

See elm-visualization/latest/Shape Curves section for more info.

Line.init requiredConfig
    |> Line.withCurve Shape.monotoneInXCurve
    |> 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"
    |> Line.render ( data, accessor )

Add an event with a msg to handle the returned Hint data. One of:

• hoverOne

• hoverAll

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

Creates a grouped line chart. This option is already set by default.

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

Show a label at the end of the lines.

Currently only takes an xGroupLabel

⚠ Use with caution, there is no knowledge of text wrapping!

defaultLayoutConfig
    |> Line.withLabels Line.xGroupLabel

Sets the left padding for the chart component. The higher the padding, the bigger the gap between the chart and the axis.

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

Sets the style for the lines The styles set here have precedence over withColorPalette and css rules.

Line.init requiredConfig
    |> Line.withLineStyle [ ( "stroke-width", "2" ) ]
    |> Line.render ( data, accessor )

Set the Y scale to logaritmic, passing a base

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

A predefined point annotation, in the format of Chart.Annotation.Point Typically used to draw points on hover.

Line.init requiredConfig
    |> Line.withEvent (Line.hoverOne OnHover)
    |> Line.withPointAnnotation annotations
    |> Line.render ( data, accessor )

Creates a stacked line chart.

It takes an option to draw stacked lines or stacked areas

Line.init requiredConfig
    |> Line.withStackedLayout Shape.stackOffsetSilhouette
    |> 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. It defaults to empty List.

defaultLayoutConfig
    |> withSymbols [ Circle, Corner, Triangle ]

An optional formatter for all float values in the alternative table content for accessibility.

Defaults to String.fromFloat

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

An optional formatter for all posix values in the alternative table content for accessibility.

Defaults to Time.posixToMillis >> String.fromInt

Line.init requiredConfig
    |> Line.withTablePosixFormat (Time.posixToMillis >> String.fromInt)
    |> 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 )

A predefined x-bar annotation, in the format of Chart.Annotation.Point Typically used to draw a vertical bar on hover.

Line.init requiredConfig
    |> Line.withEvent (Line.hoverOne OnHover)
    |> Line.VerticalLine annotations
    |> Line.render ( data, accessor )

An alias for withXContinuousDomain

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

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

Sets the Y domain of a continuous line chart

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

Line.init requiredConfig
    |> Line.withXContinuousDomain ( 0, 10 )
    |> 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 continuous 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 continuous domain, not a time domain. If not set, the domain is calculated from the data. If set on a continuous line chart this setting will have no effect.

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

Do not build an alternative table content for accessibility

⚠ By default an alternative table is always being rendered. Use this option to not build the table.

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

It returns an XAxis bottom type

Line.axisBottom [ Axis.tickCount 5 ]

It returns an YAxis Grid type

Line.axisGrid [ Axis.tickCount 5 ]

It returns an YAxis Left type

Line.axisLeft [ Axis.tickCount 5 ]

It returns an YAxis right type

Line.axisRight [ Axis.tickCount 5 ]

The xGroup label type.

The XAxis type

The YAxis type

Hide all axis. Useful, for example, when drawing a sparkline.

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

Hide the X axis

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 requiredConfig
    |> Line.hideYAxis
    |> Line.render ( data, accessor )

An alias for withXAxisContinuous

Line.init requiredConfig
    |> Line.withXAxisCont (Line.axisBottom [ Axis.tickCount 5 ])
    |> Line.render ( data, accessor )

Customise the continuous xAxis

Line.init requiredConfig
    |> Line.withXAxisContinuous (Line.axisBottom [ Axis.tickCount 5 ])
    |> Line.render ( data, accessor )

Customise the time xAxis

Line.init requiredConfig
    |> Line.withXAxisTime (Line.axisBottom [ Axis.tickCount 5 ])
    |> Line.render ( data, accessor )

Customise the yAxis

Line.init requiredConfig
    |> Line.withYAxis (Line.axisRight [ Axis.tickCount 5 ])
    |> Line.render ( data, accessor )

The data format returned by an event. Internaly defined as:

type alias Hint =
    { groupLabel : Maybe String
    , xChart : Float
    , yChart : List Float
    , xData : Float
    , yData : List Float
    }

• xChart is the cursor's x coordinate in the chart's svg space.
• yChart is the cursor's y coordinate in the chart's svg space.
• xData is the list of all x line values within the tolerance of the xChart cursor's position.
• yData is the list of all y line values within the tolerance of the yChart cursor's position. For a hoverOne event, the yChart will always only have one value.

An event listener for all elements along the same x-value.

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

An event listener for a single element at a time.

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