The data accessors

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.Accessor .groupLabel .x .y


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

Renders the line chart, after initialisation and customisation

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

Sets the approximate number of ticks for the time axis Defaults to Scale.ticks

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

Sets the formatting for ticks for the time axis Defaults to Scale.tickFormat

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

Set the ticks for the time axis Defaults to Scale.ticks

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

Sets the approximate number of ticks for the vertical axis Defaults to Scale.ticks

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

Sets the formatting for ticks in the vertical axis Defaults to Scale.tickFormat

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

Set the ticks for the vertical axis Defaults to Scale.ticks

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

Sets an accessible, long-text description for the svg chart. Default value: ""

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

Sets margin, width and height all at once Prefer this method from the individual ones when you need to set all three at once.

margin =
    { top = 30, right = 20, bottom = 30, left = 0 }


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

Sets the outer height of the line chart Default value: 400

Line.init
    |> Line.setHeight 600
    |> Line.render ( data, accessor )

Sets the margin values in the config

It follows d3s margin convention.

margin =
    { top = 30, right = 20, bottom = 30, left = 0 }


Line.init
    |> Line.setMargin margin
    |> Line.render (data, accessor)

Sets the showAxisX boolean value in the config.

Default value: True

By convention the X axix is the horizontal one, but if the layout is changed to vertical, then the X axis represents the vertical one.

Line.init
    |> Bar.setShowAxisX False
    |> Bar.render data

Sets the showAxisY boolean value in the config.

Default value: True

By convention the Y axix is the vertical one, but if the layout is changed to horizontal, then the Y axis represents the horizontal one.

Line.init
    |> Bar.setShowAxisY False
    |> Bar.render data

Sets an accessible title for the svg chart. Default value: ""

Line.init
    |> Line.setTitle "This is a chart"
    |> Line.render ( data, accessor )

Sets the outer width of the line chart Default value: 400

Line.init
    |> Line.setWidth 600
    |> Line.render ( data, accessor )