A bar chart provides a way of showing data values represented as vertical 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
{ 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
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
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
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
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