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

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

The default container configuration.

Pass the id.

See the full example here.

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.

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!

Makes the chart take the size of your container.

Pass the id.

See the full example here.

Properties:

• attributesHtml are attributes which will go on it's internal div container.
• attributesSvg are attributes which will go on it's internal svg container.
• size controls the size. See the Size type for options.
• margin adds margin around the chart.
• id sets the id. It's important for this to be unique for every chart on your page.

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.

Makes the chart size relative to it's container

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