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 Float

, size : Maybe 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 -> 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 : Float -> FontSpec -> FontSpec

Set the height for each individual line of text

setSize : 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.

indicatrix/elm-chartjs-webcomponent/2.0.1

Chartjs.Options.Font

Examples

Modules