indicatrix / elm-chartjs-webcomponent / Chartjs.Options.Elements

While there is ways to configure the styling of each dataset, sometimes you want custom styles applied to all datasets For more information, see https://www.chartjs.org/docs/latest/configuration/elements.html

Please note that this module does not have updater functions and you will need to use record update syntax if using this functionality


type alias Elements =
{ point : Maybe Point
, line : Maybe Line
, rectangle : Maybe Rectangle
, arc : Maybe Arc 
}

Controls for all element types in a chart

defaultElements : Elements

Create a blank elements object


type alias Point =
{ radius : Maybe Basics.Int
, pointStyle : Maybe Chartjs.Common.PointStyle
, rotation : Maybe Basics.Int
, backgroundColor : Maybe Color
, borderWidth : Maybe Basics.Int
, borderColor : Maybe Color
, hitRadius : Maybe Basics.Int
, hoverRadius : Maybe Basics.Int
, hoverBorderWidth : Maybe Basics.Int 
}

Point specific properties

defaultPoint : Point

Create a blank point object


type alias Line =
{ tension : Maybe Basics.Float
, backgroundColor : Maybe Color
, borderWidth : Maybe Basics.Int
, borderColor : Maybe Color
, borderCapStyle : Maybe Chartjs.Common.LineCap
, borderDash : Maybe (List Basics.Int)
, borderDashOffset : Maybe Basics.Int
, borderJoinStyle : Maybe Chartjs.Common.LineJoin
, capBezierPoints : Maybe Basics.Bool
, fill : Maybe LineFill
, stepped : Maybe Basics.Bool 
}

Line specific properties


type LineFill
    = Zero
    | Top
    | Bottom
    | NoFill

Line fill mode Useful for area charts


type alias Rectangle =
{ backgroundColor : Maybe Color
, borderWidth : Maybe Basics.Int
, borderColor : Maybe Color
, borderSkipped : Maybe Chartjs.Common.Position 
}

Rectangle specific properties (eg. bar charts)


type alias Arc =
{ backgroundColor : Maybe Color
, borderColor : Maybe Color
, borderWidth : Maybe Basics.Int 
}

Arc specific properties (eg. pie chart, polar chart)