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

For more information, see https://www.chartjs.org/docs/3.3.2/api/interfaces/fontspec.html

FontSpec objects are used throughout chart.js to style text

Examples

To create a simple font spec, just specify a font-family and a size:

create "sans-serif" 16

Any CSS font-family option will work, allowing for fallbacks:

create "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

For more advanced styling, you can adjust the style and weight:

create "sans-serif" 16
    |> setStyle "italic"
    |> setWeight "600"

You can then apply this to a title, legend, or axis label:

let
    font =
        create "sans-serif" 24
            |> setWeight "600"
in
ChartTitle.defaultTitle
    |> ChartTitle.setText "My Cool Chart"
    |> ChartTitle.setDisplay True
    |> ChartTitle.setFont font


type alias FontSpec =
{ family : Maybe String
, lineHeight : Maybe Basics.Float
, size : Maybe Basics.Int
, style : Maybe String
, weight : Maybe String 
}

A font spec object controls how various chart text is rendered This can be applied to things such as labels, legends, titles, etc.

defaultFont : FontSpec

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

create : String -> Basics.Int -> FontSpec

Quick function to create a basic font, specifying just the family and size

setFamily : String -> FontSpec -> FontSpec

Set the font family to use - this follows the standard CSS font-family options

setLineHeight : Basics.Float -> FontSpec -> FontSpec

Set the height for each individual line of text

setSize : Basics.Int -> FontSpec -> FontSpec

Set the font size, in pixels

setStyle : String -> FontSpec -> FontSpec

Set the font style. Does not apply to titles. Follows the standard CSS font-style options.

setWeight : String -> FontSpec -> FontSpec

Set the font weight. Follows the standard CSS font-weight options.