Internal.Container.Config msg
Use in the Chart.Config
passed to Chart.viewCustom
.
chartConfig : Chart.Config Data Msg
chartConfig =
{ ...
, conatiner = Container.default
, ...
}
default : String -> Basics.Int -> Basics.Int -> Config msg
The default container configuration.
Pass the id.
See the full example here.
spaced : String -> Basics.Int -> Basics.Int -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Config msg
The default container configuration, but you decide the margins.
Pass the id, the width and height, and the top, right, bottom, and left margin respectivily.
customContainer : Container.Config msg
customContainer =
Container.spaced "line-chart-1" 700 400 60 100 60 70
See the full example here.
styled : String -> Basics.Int -> Basics.Int -> List ( String, String ) -> Config msg
The default container configuration, but you can add some extra styles.
Pass the id, the width and height 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 -> Basics.Int -> Basics.Int -> Config msg
Makes the chart take the size of your container.
Pass the id, and the width and height
See the full example here.
custom : Properties msg -> Config msg
Properties:
div
container.svg
container.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.Size 600 400 , responsive = False , 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)
, responsive : Basics.Bool
, size : Internal.Container.Size
, margin : Margin
, id : String
}
{ top : Basics.Float
, right : Basics.Float
, bottom : Basics.Float
, left : Basics.Float
}
{ width : Basics.Int
, height : Basics.Int
}