Chart.Bar

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

Chart Data Format

DataGroupBand

Bar chart data format.

dataGroupBand : Bar.DataGroupBand
dataGroupBand =
    { groupLabel = Just "A"
    , points =
        [ ( "a", 10 )
        , ( "b", 13 )
        , ( "c", 16 )
        ]
    }

Chart Initialization

init : List DataGroupBand -> ( List DataGroupBand, Config )

Initializes the bar chart with the data.

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data

Chart Rendering

render : ( List DataGroupBand, Config ) -> Html msg

Renders the bar chart, after initialisation and customisation.

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.render

Configuration setters

setDesc :

String

-> ( List DataGroupBand, Config )

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

Default value: ""

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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

setDimensions :

{ margin : Margin

, width : Float

, height : Float

}

-> ( List DataGroupBand, 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.

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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


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

setDomain :

Domain

-> ( List DataGroupBand, Config )

Sets the domain value in the config.

If not set, the domain is calculated from the data.

Instead of setDomain, it is usually more convenient use one of the more specific methods: setDomainBandBandGroup, setDomainBandBandSingle, setDomainBandLinear

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


domain : Domain
domain =
    domainBand
        { bandGroup = [ "0" ]
        , bandSingle = [ "a" ]
        , linear = ( 0, 100 )
        }


Bar.init data
    |> Bar.setDomain domain
    |> Bar.render

setDomainBandGroup :

BandDomain

-> ( List DataGroupBand, Config )

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setDomainBandBandGroup [ "0" ]
    |> Bar.render

setDomainBandSingle :

BandDomain

-> ( List DataGroupBand, Config )

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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

setDomainLinear :

LinearDomain

-> ( List DataGroupBand, Config )

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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

setHeight :

Float

-> ( List DataGroupBand, Config )

Sets the outer height of the bar chart.

Default value: 400

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setHeight 600
    |> Bar.render

setLayout :

Layout

-> ( List DataGroupBand, Config )

Sets the chart layout.

Values: Bar.stackedLayout or Bar.groupedLayout

Default value: Bar.groupedLayout

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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

setLinearAxisTickCount :

Int

-> ( List DataGroupBand, Config )

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

Defaults to Scale.tickCount

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setLinearAxisTickCount 5
    |> Bar.render

setLinearAxisTickFormat :

(Float -> String)

-> ( List DataGroupBand, Config )

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

Defaults to Scale.tickFormat

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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




Bar.init data
    |> Bar.setLinearAxisTickFormat formatter
    |> Bar.render

setLinearAxisTicks :

List Float

-> ( List DataGroupBand, Config )

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

Defaults to Scale.ticks

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setLinearAxisTicks [ 1, 2, 3 ]
    |> Bar.render

setMargin :

Margin

-> ( List DataGroupBand, Config )

Sets the margin values in the config.

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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


Bar.init data
    |> Bar.setMargin margin
    |> Bar.render

setOrientation :

Orientation

-> ( List DataGroupBand, Config )

Sets the orientation value in the config.

Default value: Vertical

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setOrientation horizontalOrientation
    |> Bar.render

setShowContinousAxis :

Bool

-> ( List DataGroupBand, Config )

Sets the showContinousAxis boolean value in the config Default value: True This shows the bar's continous scale axis

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setShowContinousAxis False
    |> Bar.render

setShowOrdinalAxis :

Bool

-> ( List DataGroupBand, Config )

Sets the showOrdinalAxis boolean value in the config Default value: True This shows the bar's ordinal scale axis

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setShowOrdinalAxis False
    |> Bar.render

setTitle :

String

-> ( List DataGroupBand, Config )

Sets an accessible title for the svg chart.

Default value: ""

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setTitle "This is a chart"
    |> Bar.render

setWidth :

Float

-> ( List DataGroupBand, Config )

Sets the outer width of the bar chart.

Default value: 600

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setWidth 800
    |> Bar.render

Configuration setters arguments

defaultGroupedConfig : GroupedConfig

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


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




Bar.init data
    |> Bar.setLayout (Bar.groupedLayout )

divergingDirection : Direction

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


stackedLayout =
    Bar.stackedLayout Bar.divergingDirection


Bar.init data
    |> Bar.setLayout stackedLayout

type alias Domain =

Domain

Domain Type For bar charts this can only be of DomainBand type

domainBand : DomainBandStruct -> Domain

DomainBand constructor

dummyDomainBandStruct : DomainBandStruct
dummyDomainBandStruct =
    { bandGroup = []
    , bandSingle = []
    , linear = ( 0, 0 )
    }


domain : Domain
domain =
    domainBand dummyDomainBandStruct

groupedLayout : GroupedConfig -> Layout

Grouped layout type This is the default layout type

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


groupedLayout =
    Bar.groupedLayout Bar.defaultGroupedConfig


Bar.init data
    |> Bar.setLayout groupedLayout

horizontalOrientation : Orientation

Horizontal layout type Used as argument to Bar.setOrientation

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setOrientation horizontalOrientation

noDirection : Direction

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setLayout (Bar.stackedLayout Bar.noDirection)

stackedLayout : Direction -> Layout

Stacked layout type Stacked layouts can not have icons

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setLayout (Bar.stackedLayout Bar.noDirection)

verticalOrientation : Orientation

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

data : List DataGroupBand
data =
    [ { groupLabel = Nothing
      , points = [ ( "a", 10 ) ]
      }
    ]


Bar.init data
    |> Bar.setOrientation verticalOrientation

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 data
    |> Bar.setLayout groupedLayout

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/1.0.0

Chart.Bar

Chart Data Format

Chart Initialization

Chart Rendering

Configuration setters

Configuration setters arguments

GroupedConfig setters

Chart icons

Modules