data-viz-lab / elm-chart-builder / Chart.HistogramBar

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

The histogram bar chart can both generate the histogram data automatically or accept preprocessed data.

Data Accessors

dataAccessor : Steps -> (data -> Basics.Float) -> Chart.Internal.Type.AccessorHistogram data

The data accessor for generating a histogram. It takes a config that is separate from the general config, because it is only used when generating a histogram and not for bucketed pre-processed data.

steps : Steps
steps =
    [ 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 ]

dataAccessor =
    Histo.dataAccessor steps accessor

preProcessedDataAccessor : (data -> Histogram.Bin Basics.Float Basics.Float) -> Chart.Internal.Type.AccessorHistogram data

The data accessor for generating a histogram from pre-processed data. Meaning the data has already been bucketed and counted. values here is not used and always passed as an empty array.

preProcessedDataAccessor =
    Histo.preProcessedDataAccessor
        (\d ->
            { x0 = d.bucket
            , x1 = d.bucket + 0.1
            , values = []
            , length = d.count
            }
        )

Chart Initialization

init : RequiredConfig -> Config msg validation

Initializes the histogram bar chart with a default config.

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

Chart Rendering

render : ( List data, Chart.Internal.Type.AccessorHistogram data ) -> Config msg validation -> Html msg

Renders the histogram

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

Configuration


type alias Config msg validation =
Chart.Internal.Type.Config msg validation

The Config opaque type


type alias RequiredConfig =
{ margin : Chart.Internal.Type.Margin
, width : Basics.Float
, height : Basics.Float 
}

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

Configuration setters

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

Sets the style for the bars The styles set here have precedence over css.

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

withColor : Color -> Config msg validation -> Config msg validation

Set the histogram color

Histo.init requiredConfig
    |> Histo.withColor (Color.rgb255 240 59 32)
    |> Histo.render ( data, accessor )

withColumnTitle : Chart.Internal.Type.ColumnTitle -> Config msg validation -> Config msg validation

Set the chart columns title value

It takes one of: yColumnTitle

It takes a formatter function.

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

withDesc : String -> Config msg validation -> Config msg validation

Sets an accessible, long-text description for the svg chart. Default value: ""

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

withDomain : ( Basics.Float, Basics.Float ) -> Config msg validation -> Config msg validation

Set the domain for the HistogramGenerator. All values falling outside the domain will be ignored.

Histo.init requiredConfig
    |> Histo.withDomain ( 0, 1 )
    |> Histo.render ( data, accessor )

withTableFloatFormat : (Basics.Float -> String) -> Config msg validation -> Config msg validation

An optional formatter for all float values in the alternative table content for accessibility.

Defaults to String.fromFloat

Histo.init requiredConfig
    |> Histo.withTableFloatFormat String.fromFloat
    |> Histo.render ( data, accessor )

withoutTable : Config msg validation -> Config msg validation

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.

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

withTitle : String -> Config msg validation -> Config msg validation

Sets an accessible title for the svg chart. Default value: ""

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

Axis


type alias XAxis value =
Chart.Internal.Axis.XAxis value

The XAxis type


type alias YAxis value =
Chart.Internal.Axis.YAxis value

The YAxis type

axisBottom : List (Axis.Attribute value) -> Chart.Internal.Axis.XAxis value

It returns an XAxis Bottom type

Histo.axisBottom [ Axis.tickCount 5 ]

axisLeft : List (Axis.Attribute value) -> Chart.Internal.Axis.YAxis value

A YAxis Left type

Histo.axisLeft [ Axis.tickCount 5 ]

axisRight : List (Axis.Attribute value) -> Chart.Internal.Axis.YAxis value

It returns an YAxis Right type

Histo.axisRight [ Axis.tickCount 5 ]

hideAxis : Config msg validation -> Config msg validation

Hide all axis.

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

hideXAxis : Config msg validation -> Config msg validation

Hide the X aixs.

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

hideYAxis : Config msg validation -> Config msg validation

Hide the Y aixs.

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

withXAxis : Chart.Internal.Axis.XAxis Basics.Float -> Config msg validation -> Config msg validation

Customise the xAxis

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

withYAxis : Chart.Internal.Axis.YAxis Basics.Float -> Config msg validation -> Config msg validation

Customise the yAxis

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

Configuration arguments

yColumnTitle : (Basics.Float -> String) -> Chart.Internal.Type.ColumnTitle