Chart.Bar

This is the bar chart module from elm-chart-builder.

The Bar module expects the X axis to plot grouped ordinal data and the Y axis to plot linear data.

Chart Data Format

type alias Accessor data =

{ xGroup : data -> String

, xValue : data -> String

, yValue : data -> Float

}

The data accessors

Chart Initialization

init : Config

Initializes the bar chart with a default config.

Bar.init
    |> Bar.render ( data, accessor )

Chart Rendering

render : ( List data, Accessor data ) -> Config -> Html msg

Renders the bar chart, after initialisation and customisation.

data : List data
data =
    [ { groupLabel = "A"
      , x = "a"
      , y = 10
      }
    , { groupLabel = "A"
      , x = "b"
      , y = 13
      }
    , { groupLabel = "B"
      , x = "a"
      , y = 11
      }
    , { groupLabel = "B"
      , x = "b"
      , y = 23
      }
    ]


accessor : Accessor data
accessor =
    Accessor .groupLabel .x .y


Bar.init
    |> Bar.render (data, accessor)

Configuration setters

setDesc : String -> Config -> Config

Sets an accessible, long-text description for the svg chart.

Default value: ""

Bar.init
    |> Bar.setDesc "This is an accessible chart, with a desc element"
    |> Bar.render ( data, accessor )

setDimensions :

{ margin : Margin

, width : Float

, height : Float

}

-> Config

Sets the margin, width and height all at once. Prefer this method from the individual ones when you need to set all three values at once.

margin =
    { top = 30, right = 20, bottom = 30, left = 0 }


Bar.init
    |> Bar.setDimensions
        { margin = margin
        , width = 400
        , height = 400
        }
    |> Bar.render (data, accessor)

setDomainBandGroup : BandDomain -> Config -> Config

Sets the bandGroup value in the domain, in place of calculating it from the data.

Bar.init
    |> Bar.setDomainBandBandGroup [ "0" ]
    |> Bar.render ( data, accessor )

setDomainBandSingle : BandDomain -> Config -> Config

Sets the bandSingle value in the domain, in place of calculating it from the data.

Bar.init
    |> Bar.setDomainBandBandSingle [ "a", "b" ]
    |> Bar.render ( data, accessor )

setDomainLinear : LinearDomain -> Config -> Config

Sets the bandLinear value in the domain, in place of calculating it from the data.

Bar.init
    |> Bar.setDomainBandLinear ( 0, 0.55 )
    |> Bar.render ( data, accessor )

setHeight : Float -> Config -> Config

Sets the outer height of the bar chart.

Default value: 400

Bar.init
    |> Bar.setHeight 600
    |> Bar.render ( data, accessor )

setLayout : Layout -> Config -> Config

Sets the chart layout.

Values: Bar.stackedLayout or Bar.groupedLayout

Default value: Bar.groupedLayout

Bar.init
    |> Bar.setLayout (Bar.stackedLayout Bar.noDirection)
    |> Bar.render ( data, accessor )

setAxisYTickCount : Int -> Config -> Config

Sets the approximate number of ticks for a grouped bar chart continous axis.

Defaults to Scale.tickCount

Bar.init
    |> Bar.setAxisYTickCount 5
    |> Bar.render ( data, accessor )

setAxisYTickFormat : (Float -> String) -> Config -> Config

Sets the formatting for the ticks in a grouped bar chart continous axis.

Defaults to Scale.tickFormat

formatter =
    FormatNumber.format { usLocale | decimals = 0 }


Bar.init
    |> Bar.setAxisYTickFormat formatter
    |> Bar.render (data, accessor)

setAxisYTicks : List Float -> Config -> Config

Passes the tick values for a grouped bar chart continous axis.

Defaults to Scale.ticks

Bar.init
    |> Bar.setAxisYTicks [ 1, 2, 3 ]
    |> Bar.render ( data, accessor )

setMargin : Margin -> Config -> Config

Sets the margin values in the config.

It follows d3s margin convention.

margin =
    { top = 30, right = 20, bottom = 30, left = 0 }


Bar.init
|> Bar.setMargin margin
|> Bar.render ( data, accessor )

setOrientation : Orientation -> Config -> Config

Sets the orientation value in the config.

Accepts: horizontalOrientation or verticalOrientation Default value: verticalOrientation

Bar.init
    |> Bar.setOrientation horizontalOrientation
    |> Bar.render ( data, accessor )

setShowAxisX : Bool -> Config -> Config

Sets the showOrdinalAxis boolean value in the config

Default value: True

By convention the X axix is the horizontal one, but if the layout is changed to vertical, then the X axis represents the vertical one.

Bar.init
    |> Bar.setShowOrdinalAxis False
    |> Bar.render ( data, accessor )

setShowAxisY : Bool -> Config -> Config

Sets the showAxisY boolean value in the config

Default value: True

By convention the Y axix is the vertical one, but if the layout is changed to horizontal, then the Y axis represents the horizontal one.

Bar.init
    |> Bar.setShowAxisY False
    |> Bar.render ( data, accessor )

setTitle : String -> Config -> Config

Sets an accessible title for the svg chart.

Default value: ""

Bar.init
    |> Bar.setTitle "This is a chart"
    |> Bar.render ( data, accessor )

setWidth : Float -> Config -> Config

Sets the outer width of the bar chart.

Default value: 600

Bar.init
    |> Bar.setWidth 800
    |> Bar.render ( data, accessor )

Configuration setters arguments

defaultGroupedConfig : GroupedConfig

Default values for the Grouped Layout specific config Used for initialization purposes

groupedConfig : GroupedConfig
groupedConfig =
    Bar.defaultGroupedConfig
        |> ChartType.setIcons (icons "chart-a")




Bar.init
    |> Bar.setLayout (Bar.groupedLayout )
    |> Bar.render (data, accessor)

divergingDirection : Direction

Bar chart diverging layout It is only used for stacked layouts An example can be a population pyramid chart.

stackedLayout =
    Bar.stackedLayout Bar.divergingDirection


Bar.init
    |> Bar.setLayout stackedLayout
    |> Bar.render (data, accessor)

groupedLayout : GroupedConfig -> Layout

Grouped layout type This is the default layout type

groupedLayout =
    Bar.groupedLayout Bar.defaultGroupedConfig


Bar.init
    |> Bar.setLayout groupedLayout
    |> Bar.render (data, accessor)

horizontalOrientation : Orientation

Horizontal layout type Used as argument to Bar.setOrientation

Bar.init
    |> Bar.setOrientation horizontalOrientation
    |> Bar.render ( data, accessor )

noDirection : Direction

Bar chart no-direction layout It is only used for stacked layouts

Bar.init
    |> Bar.setLayout (Bar.stackedLayout Bar.noDirection)
    |> Bar.render ( data, accessor )

stackedLayout : Direction -> Layout

Stacked layout type

Beware that stacked layouts do not support icons

stackedLayout expects a noDirection or a divergingDirection argument.

Bar.init
    |> Bar.setLayout (Bar.stackedLayout Bar.noDirection)
    |> Bar.render ( data, accessor )

verticalOrientation : Orientation

Vertical layout type Used as argument to Bar.setOrientation This is the default layout

Bar.init
    |> Bar.setOrientation verticalOrientation
    |> Bar.render ( data, accessor )

GroupedConfig setters

These a specific configurations for the Grouped layout

setIcons : List (Symbol String) -> GroupedConfig -> GroupedConfig

Sets the Icon Symbols list in the GroupedConfig.

Default value: []

These are additional symbols at the end of each bar in a group, for facilitating accessibility.

defaultGroupedConfig
    |> setIcons [ Circle, Corner, Triangle ]

setShowIndividualLabels : Bool -> GroupedConfig -> GroupedConfig

Sets the showIndividualLabels boolean value in the GroupedConfig.

Default value: False

This shows the bar's ordinal value at the end of the rect, not the linear value.

If used together with symbols, the label will be drawn on top of the symbol.

⚠ Use with caution, there is no knowledge of text wrapping!

With a vertical layout the available horizontal space is the width of the rects.

With an horizontal layout the available horizontal space is the right margin.

defaultGroupedConfig
    |> Bar.setShowIndividualLabels True

Chart icons

Icons can be added to grouped bar charts to improve understanding and accessibility.

iconsCustom : List (Bar.BarSymbol msg)
iconsCustom =
    [ Bar.symbolCustom
        |> Bar.setSymbolIdentifier "bicycle-symbol"
        |> Bar.setSymbolWidth 640
        |> Bar.setSymbolHeight 512
        |> Bar.setSymbolPaths [ bicycleSymbol ]
    , Bar.symbolCustom
        |> Bar.setSymbolIdentifier "car-symbol"
        |> Bar.setSymbolWidth 640
        |> Bar.setSymbolHeight 512
        |> Bar.setSymbolPaths [ carSymbol ]
    , Bar.symbolCustom
        |> Bar.setSymbolIdentifier "plane-symbol"
        |> Bar.setSymbolWidth 576
        |> Bar.setSymbolHeight 512
        |> Bar.setSymbolPaths [ planeSymbol ]
    ]


groupedLayout =
    Bar.groupedLayout
        (Bar.defaultGroupedConfig
            |> Bar.setIcons
        )


Bar.init
    |> Bar.setLayout groupedLayout
    |> Bar.render ( data, accessor )

type alias BarSymbol msg =

Symbol msg

Bar chart symbol type

symbolCircle : String -> BarSymbol msg

Circle symbol type

symbolCorner : String -> BarSymbol msg

Corner symbol type

symbolCustom : BarSymbol msg

A custom bar chart symbol type

symbolTriangle : String -> BarSymbol msg

Triangle symbol type

setSymbolHeight : Float -> BarSymbol msg -> BarSymbol msg

Set the custom symbol height When using a custom svg icon this is the 4th argument of its viewBox attribute

setSymbolIdentifier : String -> BarSymbol msg -> BarSymbol msg

Set the custom symbol identifier

setSymbolPaths : List String -> BarSymbol msg -> BarSymbol msg

Set the custom symbol paths When using a custom svg icon these are the d attribute of the path elements

setSymbolUseGap : Bool -> BarSymbol msg -> BarSymbol msg

Set the useGap boolean flag.

All bar chart icons are drawn with a gap from the bar rectangles, but, depending on the custom icon shape and on the orientation of the chart, the icon could already have a gap and we do not want to add other space.

setSymbolWidth : Float -> BarSymbol msg -> BarSymbol msg

Set the custom symbol width When using a custom svg icon this is the 3rd argument of its viewBox attribute

data-viz-lab/elm-chart-builder/2.0.0