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

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
            }
        )

Initializes the histogram bar chart with a default config.

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

Renders the histogram

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

The Config opaque type

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

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 )

Set the histogram color

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

Set the chart columns title value

It takes one of: yColumnTitle

It takes a formatter function.

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

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 )

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 )

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 )

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

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

The XAxis type

The YAxis type

It returns an XAxis Bottom type

Histo.axisBottom [ Axis.tickCount 5 ]

A YAxis Left type

Histo.axisLeft [ Axis.tickCount 5 ]

It returns an YAxis Right type

Histo.axisRight [ Axis.tickCount 5 ]

Hide all axis.

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

Hide the X aixs.

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

Hide the Y aixs.

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

Customise the xAxis

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

Customise the yAxis

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