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 100Create a Logarithmic y-axis, aligned to the right hand side, suggesting to start at 0:
defaultScale Logarithmic "y"
|> setPosition Common.Right
|> setSuggestedMin 0To adjust the step size of ticks, you will need to set a ScaleTicks object (see below)
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
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!
Set the position of this scale
Set whether the ticks on this scale should be reversed
Set the minimum value for this scale This will override the minimum value from the data
Set the maximum value for this scale This will override the maximum value from the data
Set a suggestion, used when calculating the minimum extent
Set a suggestion, used when calculating the maximum extent
Set the grid properties for this scale
Set the title properties for this scale
Set the tick properties for this scale
Styling properties for the grid lines of a scale
Create a blank grid properties object that can then be manipulated
Set the edge border color
Set the edge border width
Set whether the border should be drawn
Set whether the border should be drawn
Set whether to draw the tick dashes
Set the color of grid lines
Set the color of the tick dashes
Set the length (how far into the chart they extend) of tick dashes
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
)Scale titles are used for labelling the graph axes
Create a basic title from the given text
Set the text color for this title
Set the font properties for this title text
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
)Styling properties for the tick labels of a scale
Create a blank ticks properties object that can then be manipulated
Set a fixed step size for these ticks
Set the color of tick label backdrops
Set the padding around tick label backdrops
Set whether or not these ticks should be displayed
Set the padding around the tick labels
Set the color for the tick labels
Set the font properties for the tick labels
Set the tick stroke color
Set the tick stroke width
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
Set a prefix to apply to all the tick labels
Set a suffix to apply to all the tick labels
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