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

Axes are an integral part of a chart.

For more information, see https://www.chartjs.org/docs/3.3.2/axes/

Scale IDs

Each scale requires an identifier. This is used to determine the axis, and can also be used to assign datasets to specific axises.

By default, ChartJs determines the axis based on the first letter of the axis id -> eg using the id "x" will create an x axis. For best results, you can explicitly set an axis using setAxis

Example Scales

Create a Linear x-axis, ranging from 0 to 100

defaultScale Linear "x"
    |> setMin 0
    |> setMax 100

Create a Logarithmic y-axis, aligned to the right hand side, suggesting to start at 0:

defaultScale Logarithmic "y"
    |> setPosition Common.Right
    |> setSuggestedMin 0

To adjust the step size of ticks, you will need to set a ScaleTicks object (see below)


type ScaleType
    = Linear
    | Logarithmic
    | Categorical
    | Time
    | RadialLinear

Linear and logarithmic scales work best

For categorical scales, you're probably best using a data object with labels set For time scales, good luck


type alias Scale =
{ id : String
, type_ : ScaleType
, axis : Maybe Chartjs.Common.IndexAxis
, position : Maybe Chartjs.Common.Position
, reverse : Maybe Basics.Bool
, min : Maybe Basics.Float
, max : Maybe Basics.Float
, suggestedMin : Maybe Basics.Float
, suggestedMax : Maybe Basics.Float
, grid : Maybe ScaleGrid
, title : Maybe ScaleTitle
, ticks : Maybe ScaleTicks 
}

defaultScale : ScaleType -> String -> Scale

Given a scale type and an ID, creates an empty scale object

It's best practice to set the ID of your scales to "x" or "y", depending on what axis you need For more complicated use cases, you can assign these objects to datasets using the XAxisID / YAxisID properties

setAxis : Chartjs.Common.IndexAxis -> Scale -> Scale

Set the axis for this scale - is this an X axis or a Y axis?

If this is not set, Chartjs will try and guess based on the first letter of your axis ID For best practices, you should set this explicitly!

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

Set the position of this scale

setReverse : Basics.Bool -> Scale -> Scale

Set whether the ticks on this scale should be reversed

setMin : Basics.Float -> Scale -> Scale

Set the minimum value for this scale This will override the minimum value from the data

setMax : Basics.Float -> Scale -> Scale

Set the maximum value for this scale This will override the maximum value from the data

setSuggestedMin : Basics.Float -> Scale -> Scale

Set a suggestion, used when calculating the minimum extent

setSuggestedMax : Basics.Float -> Scale -> Scale

Set a suggestion, used when calculating the maximum extent

setGrid : ScaleGrid -> Scale -> Scale

Set the grid properties for this scale

setTitle : ScaleTitle -> Scale -> Scale

Set the title properties for this scale

setTicks : ScaleTicks -> Scale -> Scale

Set the tick properties for this scale

Styling the Grid


type alias ScaleGrid =
{ borderColor : Maybe Color
, borderWidth : Maybe Basics.Int
, gridColor : Maybe Color
, drawBorder : Maybe Basics.Bool
, drawOnChartArea : Maybe Basics.Bool
, drawTicks : Maybe Basics.Bool
, tickColor : Maybe Color
, tickLength : Maybe Basics.Int
, tickWidth : Maybe Basics.Int 
}

Styling properties for the grid lines of a scale

defaultGrid : ScaleGrid

Create a blank grid properties object that can then be manipulated

setBorderColor : Color -> ScaleGrid -> ScaleGrid

Set the edge border color

setBorderWidth : Basics.Int -> ScaleGrid -> ScaleGrid

Set the edge border width

setDrawBorder : Basics.Bool -> ScaleGrid -> ScaleGrid

Set whether the border should be drawn

setDrawOnChartArea : Basics.Bool -> ScaleGrid -> ScaleGrid

Set whether the border should be drawn

setDrawTicks : Basics.Bool -> ScaleGrid -> ScaleGrid

Set whether to draw the tick dashes

setGridColor : Color -> ScaleGrid -> ScaleGrid

Set the color of grid lines

setTickColor : Color -> ScaleGrid -> ScaleGrid

Set the color of the tick dashes

setTickLength : Basics.Int -> ScaleGrid -> ScaleGrid

Set the length (how far into the chart they extend) of tick dashes

setTickWidth : Basics.Int -> ScaleGrid -> ScaleGrid

Set the width of tick dashes

Titles / Axis Labels

To help tell users what they're looking at, you can set a title to label each axis.

defaultScale Linear "x"
    |> setTitle
        (defaultTitle "The X Axis"
            |> setTitleColor Color.red
        )


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

Scale titles are used for labelling the graph axes

defaultTitle : String -> ScaleTitle

Create a basic title from the given text

setTitleColor : Color -> ScaleTitle -> ScaleTitle

Set the text color for this title

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

Set the font properties for this title text

setTitlePadding : Basics.Int -> ScaleTitle -> ScaleTitle

Set the padding around the title text

Styling the Tick Labels

defaultScale Linear "y"
    |> setMin 0
    |> setMax 100
    |> setTicks
        (defaultTicks
            |> setTickTextColor Color.white
            |> setTickStrokeColor Color.red
            |> setTickStrokeWidth 2
            |> setTickPadding 4
        )

ScaleTicks also contains the stepSize property, which can be used to explicitly set the gap between ticks:

defaultScale Linear "y"
    |> setMin 0
    |> setMax 100
    |> setTicks
        (defaultTicks
            |> setStepSize 20
        )


type alias ScaleTicks =
{ backdropColor : Maybe Color
, backdropPadding : Maybe Basics.Int
, color : Maybe Color
, display : Maybe Basics.Bool
, font : Maybe Chartjs.Options.Font.FontSpec
, padding : Maybe Basics.Int
, stepSize : Maybe Basics.Float
, textStrokeColor : Maybe Color
, textStrokeWidth : Maybe Basics.Int
, z : Maybe Basics.Int
, tickFormat : Maybe TickFormat 
}

Styling properties for the tick labels of a scale

defaultTicks : ScaleTicks

Create a blank ticks properties object that can then be manipulated

setStepSize : Basics.Float -> ScaleTicks -> ScaleTicks

Set a fixed step size for these ticks

setBackdropColor : Color -> ScaleTicks -> ScaleTicks

Set the color of tick label backdrops

setBackdropPadding : Basics.Int -> ScaleTicks -> ScaleTicks

Set the padding around tick label backdrops

setTickDisplay : Basics.Bool -> ScaleTicks -> ScaleTicks

Set whether or not these ticks should be displayed

setTickPadding : Basics.Int -> ScaleTicks -> ScaleTicks

Set the padding around the tick labels

setTickTextColor : Color -> ScaleTicks -> ScaleTicks

Set the color for the tick labels

setTickFont : Chartjs.Options.Font.FontSpec -> ScaleTicks -> ScaleTicks

Set the font properties for the tick labels

setTickStrokeColor : Color -> ScaleTicks -> ScaleTicks

Set the tick stroke color

setTickStrokeWidth : Basics.Int -> ScaleTicks -> ScaleTicks

Set the tick stroke width

setTickZ : Basics.Int -> ScaleTicks -> ScaleTicks

Set the z-index of the tick layer

Values <= 0 are under datasets, > 0 are drawn on top

Label Formatting

You can additionally add prefixes or suffixes to a tick label.


type TickFormat
    = Prefix String
    | Suffix String

Formatting callbacks for the scale ticks Use setPrefix and setSuffix instead

setTickPrefix : String -> ScaleTicks -> ScaleTicks

Set a prefix to apply to all the tick labels

setTickSuffix : String -> ScaleTicks -> ScaleTicks

Set a suffix to apply to all the tick labels