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

For more information, see https://www.chartjs.org/docs/latest/configuration/legend.html


type alias Legend =
{ display : Maybe Basics.Bool
, position : Maybe Chartjs.Common.Position
, fullWidth : Maybe Basics.Bool
, reverse : Maybe Basics.Bool
, labels : Maybe Labels
, title : Maybe Title 
}

The chart legend displays data about the datasets that are appearing on the chart

defaultLegend : Legend

Create a blank legend object that can then be updated with the below functions

setDisplay : Basics.Bool -> Legend -> Legend

Is the legend shown?

setPosition : Chartjs.Common.Position -> Legend -> Legend

Position of the legend (relative to the chart)

setFullWidth : Basics.Bool -> Legend -> Legend

Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.

setReverse : Basics.Bool -> Legend -> Legend

Legend will show datasets in reverse order

setLabels : Labels -> Legend -> Legend

Set properties for the labels of this legend

setTitle : Title -> Legend -> Legend

Set properties for the title of this legend


type alias Labels =
{ boxWidth : Maybe Basics.Int
, boxHeight : Maybe Basics.Int
, color : Maybe Color
, font : Maybe Chartjs.Options.Font.FontSpec
, padding : Maybe Basics.Int
, pointStyle : Maybe Chartjs.Common.PointStyle 
}

Properties for the labels that make up the legend

defaultLabels : Labels

Create a blank labels object that can then be updated with the below functions

setBoxWidth : Basics.Int -> Labels -> Labels

Specify the width of the coloured box / icon next to each legend entry

setBoxHeight : Basics.Int -> Labels -> Labels

Specify the height of the coloured box / icon next to each legend entry

setLabelColor : Color -> Labels -> Labels

Set the text color to be used for legend labels

setLabelFont : Chartjs.Options.Font.FontSpec -> Labels -> Labels

Set the font properties to be used for legend labels

setLabelPadding : Basics.Int -> Labels -> Labels

Set the padding around each legend label

setPointStyle : Chartjs.Common.PointStyle -> Labels -> Labels

Set a special point style for the legend label boxes


type alias Title =
{ text : String
, color : Maybe Color
, font : Maybe Chartjs.Options.Font.FontSpec
, padding : Maybe Basics.Int 
}

defaultTitle : String -> Title

Create a blank legend title object that can then be updated with the below functions

setTitleColor : Color -> Title -> Title

Set the text color for the legend title

setTitleFont : Chartjs.Options.Font.FontSpec -> Title -> Title

Set the font properties for the legend title

setTitlePadding : Basics.Int -> Title -> Title

Set the padding around the legend title