terezka / elm-charts-alpha / Chart.Container


type alias Config msg =
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.

Customization

custom : Properties msg -> Config msg

Properties:

See the full example here.


type alias Properties msg =
{ attributesHtml : List (Html.Attribute msg)
, attributesSvg : List (Svg.Attribute msg)
, responsive : Basics.Bool
, 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 =
{ width : Basics.Int
, height : Basics.Int 
}