Chart

This module comprises tools to create and modify a model of the data, labels and styling, and then the function toHtml renders the model using one of the provided views.

Chart constructors

hBar : List ( Float, String ) -> Model

The horizontal bar chart results in a set of bars, one above the other, of lengths in proportion to the value. A label with the data value is printed in each bar.

hBar data
    |> title "My Chart"
    |> toHtml

vBar : List ( Float, String ) -> Model

The vertical bar chart results in a set of bars of lengths in proportion to the value. A label is printed below each bar.

vBar data
    |> title "My Chart"
    |> toHtml

pie : List ( Float, String ) -> Model

The pie chart results in a circle cut into coloured segments of size proportional to the data value.

pie data
    |> toHtml

Customisers

title : String -> Model -> Model

title adds a title to the model.

-- e.g. build a chart from scratch
chartInit vs ls BarHorizontal
    |> title "This will be the title"
    |> toHtml

colours : List String -> Model -> Model

colours replaces the default colours. Bar charts use just one colour, which will be the head of the list provided.

vChart data
    |> colours [ "steelblue" ]
    |> toHtml


pie data
    |> colours [ "steelblue", "#96A65B", "#D9A679", "#593F27", "#A63D33" ]
    |> toHtml

colors : List String -> Model -> Model

colors supports alternative spelling of colours

addValueToLabel : Model -> Model

addValueToLabel adds the data value of each item to the data label. This is applied by default in hBar.

vBar data
    |> addValueToLabel
    |> toHtml

updateStyles : String -> List Style -> Model -> Model

updateStyles replaces styles for a specified part of the chart. Charts have the following div structure

.container
    .title
    .chart-container
        .chart      (container for the bars or pie segments)
            .chart-elements
        .legend     (also for the label container in a vertical bar chart)
            .legend-labels


vChart vs ls
    |> updateStyles "chart" [ ( "color", "black" ) ]
    |> toHtml

dimensions : Int -> Int -> Model -> Model

sets the width and height of a chart

vChart vs ls
    |> dimensions 400 300
    |> toHtml

Rendering

toHtml : Model -> Html a

toHtml is called last, and causes the chart data to be rendered to html.

hBar data
    |> toHtml

Modules

Chart

munksgaard/elm-charts/1.0.0

Chart

Chart constructors

Customisers

Rendering

Modules