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
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
{ 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.