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.
hBar : List ( Basics.Float, String ) -> ChartModel.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 ( Basics.Float, String ) -> ChartModel.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 ( Basics.Float, String ) -> ChartModel.Model
The pie chart results in a circle cut into coloured segments of size proportional to the data value.
pie data
|> toHtml
title : String -> ChartModel.Model -> ChartModel.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 -> ChartModel.Model -> ChartModel.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 -> ChartModel.Model -> ChartModel.Model
colors supports alternative spelling of colours
addValueToLabel : ChartModel.Model -> ChartModel.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 ChartModel.Style -> ChartModel.Model -> ChartModel.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 : Basics.Int -> Basics.Int -> ChartModel.Model -> ChartModel.Model
sets the width and height of a chart
vChart vs ls
|> dimensions 400 300
|> toHtml
toHtml : ChartModel.Model -> Html a
toHtml is called last, and causes the chart data to be rendered to html.
hBar data
|> toHtml