Axes are an integral part of a chart.
For more information, see https://www.chartjs.org/docs/3.3.2/axes/
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
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)
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
{ 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
{ 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
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
)
{ 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
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
)
{ 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
You can additionally add prefixes or suffixes to a tick label.
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