Chartjs.DataSets.Bar

A bar chart provides a way of showing data values represented as vertical bars.

Bars

Bar datasets are easy to create - just provide a dataset label and a list of floats

defaultBarFromData "Example Chart" [ 4, 8, 15, 16, 23, 42 ]

When grouping datasets into a chart data object, the labels specified will be used as the bar chart categories:

dataset =
    defaultBarFromData "Example Chart" [ 4, 8, 15, 16, 23, 42 ]
        |> ChartData.BarData


data =
    ChartData.dataFromLabels [ "One", "Two", "Three", "Four", "Five", "Six" ]
        |> ChartData.addDataset dataset

type alias DataSet =

{ label : String

, data : List Float

, hidden : Maybe Bool

, order : Maybe Int

, stack : Maybe String

, indexAxis : Maybe IndexAxis

, xAxisID : Maybe String

, yAxisID : Maybe String

, backgroundColor : Maybe (PointProperty Color)

, barPercentage : Maybe Float

, barThickness : Maybe Int

, borderColor : Maybe (PointProperty Color)

, borderRadius : Maybe (PointProperty Int)

, borderSkipped : Maybe String

, borderWidth : Maybe (PointProperty Float)

, categoryPercentage : Maybe Float

, hoverBackgroundColor : Maybe (PointProperty Color)

, hoverBorderColor : Maybe (PointProperty Color)

, hoverBorderWidth : Maybe (PointProperty Float)

, maxBarThickness : Maybe Int

, minBarLength : Maybe Int

}

For further information on these properties, see https://www.chartjs.org/docs/latest/charts/bar.html

You should not use the dataset type directly Instead use the updater pipeline functions:

defaultBarFromLabel "Example"
    |> setBackgroundColor (Common.All Color.red)
    |> setBorderColor (Common.All Color.white)

defaultBarFromLabel : String -> DataSet

Create a Bar dataset with just a label

defaultBarFromData : String -> List Float -> DataSet

Create a Bar dataset with a label and data

setData : List Float -> DataSet -> DataSet

Set the data displayed by this dataset This is a list of floats, where each float is represented as a bar

setLabel : String -> DataSet -> DataSet

Set the label for this dataset

setHidden : Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Int -> DataSet -> DataSet

Set the drawing order of the dataset This also affects stacking, tooltips, and legends

Stacking

To stack bars, use setStack to assign each dataset to a stacking group. In this example, dataset1 and dataset2 will be stacked together:

dataset1 =
    BarData.defaultBarFromData [ 10, 20, 30 ]
        |> setStack "Stack 1"


dataset2 =
    BarData.defaultBarFromData [ 5, 15, 25 ]
        |> setStack "Stack 1"


dataset3 =
    BarData.defaultBarFromData [ 20, 40, 30 ]
        |> setStack "Stack 2"

setStack : String -> DataSet -> DataSet

ID of the group, used for stacking datasets eg. two datasets with the same field for stack will be stacked together

Axes

See the Scale module for more information on custom axes

setIndexAxis : IndexAxis -> DataSet -> DataSet

Which axis to use for indexing Set to XAxis for a vertical chart, set to YAxis for a horizontal chart

setXAxisID : String -> DataSet -> DataSet

The ID of the X axis to plot the dataset on

setYAxisID : String -> DataSet -> DataSet

The ID of the Y axis to plot the dataset on

Bar Sizing

setBarPercentage : Float -> DataSet -> DataSet

0-1 percentage of the available width each bar should be within the category width.

setBarThickness : Int -> DataSet -> DataSet

Manually force the width (in pixels) of each bar

setCategoryPercentage : Float -> DataSet -> DataSet

Percent (0-1) of the available width each category should be within the sample width.

setMaxBarThickness : Int -> DataSet -> DataSet

Max bar thickness, in pixels If set, bars will not be thicker than this value

setMinBarLength : Int -> DataSet -> DataSet

Minimum bar length, in pixels If set, bars will not be shorter than this value

Colors and Borders

setBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color of the bar

setBorderColor : PointProperty Color -> DataSet -> DataSet

Border color of the bar

setBorderRadius : PointProperty Int -> DataSet -> DataSet

Border radius for each bar

setBorderSkipped : String -> DataSet -> DataSet

Which edge to skip drawing border for One of: 'bottom' 'left' 'top' 'right'

setBorderWidth : PointProperty Float -> DataSet -> DataSet

Stroke width of the bar in pixels

setHoverBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color of the bar when hovered

setHoverBorderColor : PointProperty Color -> DataSet -> DataSet

Border color of the bar when hovered

setHoverBorderWidth : PointProperty Float -> DataSet -> DataSet

Border width of the bar when hovered

indicatrix/elm-chartjs-webcomponent/2.0.0