indicatrix / elm-chartjs-webcomponent / 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 Basics.Float
, hidden : Maybe Basics.Bool
, order : Maybe Basics.Int
, stack : Maybe String
, indexAxis : Maybe Chartjs.Common.IndexAxis
, xAxisID : Maybe String
, yAxisID : Maybe String
, backgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, barPercentage : Maybe Basics.Float
, barThickness : Maybe Basics.Int
, borderColor : Maybe (Chartjs.Common.PointProperty Color)
, borderRadius : Maybe (Chartjs.Common.PointProperty Basics.Int)
, borderSkipped : Maybe String
, borderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, categoryPercentage : Maybe Basics.Float
, hoverBackgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderColor : Maybe (Chartjs.Common.PointProperty Color)
, hoverBorderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, maxBarThickness : Maybe Basics.Int
, minBarLength : Maybe Basics.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 Basics.Float -> DataSet

Create a Bar dataset with a label and data

setData : List Basics.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 : Basics.Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Basics.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 : Chartjs.Common.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 : Basics.Float -> DataSet -> DataSet

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

setBarThickness : Basics.Int -> DataSet -> DataSet

Manually force the width (in pixels) of each bar

setCategoryPercentage : Basics.Float -> DataSet -> DataSet

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

setMaxBarThickness : Basics.Int -> DataSet -> DataSet

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

setMinBarLength : Basics.Int -> DataSet -> DataSet

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

Colors and Borders

setBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color of the bar

setBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Border color of the bar

setBorderRadius : Chartjs.Common.PointProperty Basics.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 : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Stroke width of the bar in pixels

setHoverBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color of the bar when hovered

setHoverBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Border color of the bar when hovered

setHoverBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Border width of the bar when hovered