peterszerzo / line-charts / LineChart.Container


type alias Config msg =
Internal.Container.Config msg

Use in the LineChart.Config passed to LineChart.viewCustom.

chartConfig : LineChart.Config Data Msg
chartConfig =
  { ...
  , conatiner = Container.default
  , ...
  }

default : String -> Config msg

The default container configuration.

Pass the id.

See the full example here.

spaced : String -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Config msg

The default container configuration, but you decide the margins.

Pass the id and the top, right, bottom, and left margin respectivily.

customContainer : Container.Config msg
customContainer =
    Container.spaced "line-chart-1" 60 100 60 70

See the full example here.

styled : String -> List ( String, String ) -> Config msg

The default container configuration, but you can add some extra styles.

Pass the id and styles in form of tupels of strings.

customContainer : Container.Config msg
customContainer =
    Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ]

Ok, so we have spaced if we want to set the margins and styled if we want to set the styles; but what if I want to set the margins AND the styles? If so, use custom!

responsive : String -> Config msg

Makes the chart take the size of your container.

Pass the id.

See the full example here.

Customization

custom : Properties msg -> Config msg

Properties:

containerConfig : Container.Config msg
containerConfig =
    Container.custom
        { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ]
        , attributesSvg = []
        , size = Container.static
        , margin = Container.Margin 30 100 60 80
        , id = "chart-id"
        }

See the full example here.


type alias Properties msg =
{ attributesHtml : List (Html.Attribute msg)
, attributesSvg : List (Svg.Attribute msg)
, size : Internal.Container.Size
, margin : Margin
, id : String 
}


type alias Margin =
{ top : Basics.Float
, right : Basics.Float
, bottom : Basics.Float
, left : Basics.Float 
}

Sizing


type alias Size =
Internal.Container.Size

relative : Size

Makes the chart size relative to it's container

static : Size

Makes the chart the exact number of pixels defined in your x and y axis configuration.