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.
custom : Properties msg -> Config msg
Properties:
div
container.svg
container.Size
type for options.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.
{ attributesHtml : List (Html.Attribute msg)
, attributesSvg : List (Svg.Attribute msg)
, size : Internal.Container.Size
, margin : Margin
, id : String
}
{ top : Basics.Float
, right : Basics.Float
, bottom : Basics.Float
, left : Basics.Float
}
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.