Chart.Bar

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

The Bar module expects the X axis to plot ordinal data and the Y axis to plot continuous data. The data can be grouped by passing an xGroup accessor, or it can be flat by making the accessor always Nothing.

The X and Y axis are determined by the default vertical orientation. If the orientatin changes, X and Y also change.

Data Format

type alias Accessor data =

{ xGroup : data -> Maybe String

, xValue : data -> String

, yValue : data -> Float

}

The data accessors

Initialization

init : RequiredConfig -> Config

Initializes the bar chart with the required config.

data :
    List
        { groupLabel : String
        , x : String
        , y : Float
        }
data =
    [ { groupLabel = "A"
      , x = "a"
      , y = 10
      }
    , { groupLabel = "B"
      , x = "a"
      , y = 11
      }
    ]


accessor :
    Bar.Accessor
        { groupLabel : String
        , x : String
        , y : Float
        }
accessor =
    Bar.Accessor .groupLabel .x .y


Bar.init
    { margin =
        { top = 10
        , right = 10
        , bottom = 30
        , left = 30
        }
    , width = 500
    , height = 200
    }
    |> Bar.render ( data, accessor )

Rendering

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

Renders the bar chart, after initialisation and optional customisations.

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

Configuration

type alias Config =

Config

The Config opaque type

type alias RequiredConfig =

RequiredConfig

The required config, passed as an argument to the init function

Optional Configuration Setters

withBarStyle : List ( String, String ) -> Config -> Config

Sets the style for the bars The styles set here have precedence over withColorPalette, withColorInterpolator and css.

Bar.init requiredConfig
    |> Bar.withBarStyle [ ( "fill", "none" ), ( "stroke-width", "2" ) ]
    |> Bar.render ( data, accessor )

withColorInterpolator : (Float -> Color) -> Config -> Config

Sets the color interpolator for the chart.

This option is not supported for stacked bar charts and will have no effect on them.

Bar.init requiredConfig
    |> Bar.withColorInterpolator Scale.Color.plasmaInterpolator
    |> Bar.render ( data, accessor )

withColorPalette : List Color -> Config -> Config

Sets the color palette for the chart. If a palette with a single color is passed all bars will have the same colour. If the bars in a group are more then the colours in the palette, the colours will be repeted.

palette =
    Scale.Color.tableau10


Bar.init requiredConfig
    |> Bar.withColorPalette palette
    |> Bar.render (data, accessor)

withColumnTitle : ColumnTitle -> Config -> Config

Set the chart columns title value

It takes one of: stackedColumnTitle, xOrdinalColumnTitle, yColumnTitle

defaultLayoutConfig
    |> Bar.withColumnTitle (Bar.yColumnTitle String.fromFloat)

withDesc : String -> Config -> Config

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

It defaults to an empty string. This shuld be set if no title nor description exists for the chart, for example in a sparkline.

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

withGroupedLayout : Config -> Config

Creates a grouped bar chart.

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

withLabels : Label -> Config -> Config

Show a label at the end of the bars.

It takes one of: yLabel, xLabel, xGroupLabel

If used together with symbols, the label will be drawn after the symbol.

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

defaultLayoutConfig
    |> Bar.withLabels (Bar.yLabel String.fromFloat)

withLogYScale : Float -> Config -> Config

Set the Y scale to logaritmic, passing a base

Bar.init requiredConfig
    |> Bar.withLogYScale 10
    |> Bar.render ( data, accessor )

withOrientation : Orientation -> Config -> Config

Sets the orientation value.

Accepts: horizontal or vertical. Default value: vertical.

Bar.init requiredConfig
    |> Bar.withOrientation Bar.horizontal
    |> Bar.render ( data, accessor )

withStackedLayout : Direction -> Config -> Config

Creates a stacked bar chart. Stacked Charts do not support symbols.

It takes a direction: diverging or noDirection.

Bar.init requiredConfig
    |> Bar.withStackedLayout Bar.diverging
    |> Bar.render ( data, accessor )

withSymbols : List Symbol -> Config -> Config

Pass a list of symbols to be rendered at the end of the bars.

Default value: []

Usefull for facilitating accessibility.

Bar.init requiredConfig
    |> withSymbols [ Circle, Corner, Triangle ]
    |> Bar.render ( data, accessor )

withoutTable : Config -> Config

Do not build an alternative table content for accessibility

⚠ By default an alternative table is always being rendered. Use this option to not build the table.

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

withTitle : String -> Config -> Config

Sets an accessible title for the whole svg chart.

It defaults to an empty string. This shuld be set if no title nor description exists for the chart, for example in a sparkline.

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

withXDomain : List String -> Config -> Config

Sets the band domain explicitly. The data relates to the xValue accessor.

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

withXGroupDomain : List String -> Config -> Config

Sets the group band domain explicitly. The group data relates to the xGoup accessor.

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

withXLabels : Config -> Config

Show the X ordinal values at the end of the bars.

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!

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

withYDomain : ( Float, Float ) -> Config -> Config

Sets the continuous domain explicitly. The data relates to the yValue accessor.

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

Axis

⚠ axisLeft & axisRight apply to a vertical chart context. If you change the chart orientation to horizontal, the axis positioning will always change to bottom.

type alias XAxis value =

XAxis value

The XAxis type

type alias YAxis value =

YAxis value

The YAxis type

axisBottom : List (Attribute value) -> XAxis value

It returns an XAxis Bottom type

Bar.axisBottom [ Axis.tickCount 5 ]

axisTop : List (Attribute value) -> XAxis value

It returns an XAxis Top type

Bar.axisTop [ Axis.tickCount 5 ]

axisGrid : List (Attribute value) -> YAxis value

It returns an YAxis Grid type

Bar.axisGrid [ Axis.tickCount 5 ]

axisLeft : List (Attribute value) -> YAxis value

It returns an YAxis Left type

Only relevant if the chart orientation is vertical.

Bar.axisLeft [ Axis.tickCount 5 ]

axisRight : List (Attribute value) -> YAxis value

It returns an YAxis Right type

Only relevant if the chart orientation is vertical.

Bar.axisRight [ Axis.tickCount 5 ]

hideAxis : Config -> Config

Hide all axis.

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

hideXAxis : Config -> Config

Hide the X aixs.

The X axis depends from the layout:

With a vertical layout the X axis is the horizontal axis.
With a horizontal layout the X axis is the vertical axis.

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

hideYAxis : Config -> Config

Hide the Y aixs.

The Y axis depends from the layout:

With a vertical layout the Y axis is the vertical axis.
With a horizontal layout the Y axis is the horizontal axis.

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

withXAxis : XAxis String -> Config -> Config

Customise the xAxis

Bar.init requiredConfig
    |> Bar.withXAxis (Bar.axisBottom [ Axis.tickCount 5 ])
    |> Bar.render ( data, accessor )

withYAxis : YAxis Float -> Config -> Config

Customise the yAxis

Bar.init requiredConfig
    |> Bar.withYAxis (Bar.axisRight [ Axis.tickCount 5 ])
    |> Bar.render ( data, accessor )

Configuration arguments

diverging : Direction

Diverging layout for stacked bar charts.

An example can be a population pyramid chart.

Bar.init requiredConfig
    |> Bar.withStackedLayout Bar.diverging
    |> Bar.render ( data, accessor )

horizontal : Orientation

Horizontal layout type.

Used as argument to Bar.withOrientation.

Bar.init requiredConfig
    |> Bar.withOrientation horizontal
    |> Bar.render ( data, accessor )

noDirection : Direction

Default layout for stacked bar charts, where the bars are sequentially stacked one upon another.

Bar.init requiredConfig
    |> Bar.withStackedLayout Bar.noDirection
    |> Bar.render ( data, accessor )

stackedColumnTitle : (Float -> String) -> ColumnTitle

vertical : Orientation

Vertical layout type.

Used as argument to Bar.withOrientation. This is the default layout.

Bar.init requiredConfig
    |> Bar.withOrientation vertical
    |> Bar.render ( data, accessor )

xOrdinalColumnTitle : ColumnTitle

yColumnTitle : (Float -> String) -> ColumnTitle

yLabel : (Float -> String) -> Label

xLabel : Label

xGroupLabel : Label

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