Linear Axis

The linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.

Configuration Options

Linear Axis specific options

Namespace: options.scales[scaleId]

NameTypeDescription
beginAtZerobooleanif true, scale will include 0 if it is not already included.
gracenumber|stringPercentage (string ending with %) or amount (number) for added room in the scale range above and below data. more…

Common options to all cartesian axes

Namespace: options.scales[scaleId]

NameTypeDefaultDescription
boundsstring‘ticks’Determines the scale bounds. more…
positionstringPosition of the axis. more…
axisstringWhich type of axis this is. Possible values are: ‘x’, ‘y’. If not set, this is inferred from the first character of the ID which should be ‘x’ or ‘y’.
offsetbooleanfalseIf true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a bar chart by default.
titleobjectScale title configuration. more…

Common options to all axes

Namespace: options.scales[scaleId]

NameTypeDefaultDescription
typestringType of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
alignToPixelsbooleanfalseAlign pixel values to device pixels.
backgroundColorColorBackground color of the scale area.
displayboolean|stringtrueControls the axis global visibility (visible when true, hidden when false). When display: ‘auto’, the axis is visible only if at least one associated dataset is visible.
gridobjectGrid line configuration. more…
minnumberUser defined minimum number for the scale, overrides minimum value from data. more…
maxnumberUser defined maximum number for the scale, overrides maximum value from data. more…
reversebooleanfalseReverse the scale.
stackedboolean|stringfalseShould the data be stacked. more…
suggestedMaxnumberAdjustment used when calculating the maximum data value. more…
suggestedMinnumberAdjustment used when calculating the minimum data value. more…
ticksobjectTick configuration. more…
weightnumber0The weight used to sort the axis. Higher weights are further away from the chart area.

Tick Configuration

Linear Axis specific tick options

Namespace: options.scales[scaleId].ticks

NameTypeScriptableDefaultDescription
countnumberYesundefinedThe number of ticks to generate. If specified, this overrides the automatic generation.
formatobjectYesThe Intl.NumberFormatLinear Axis - 图1 (opens new window) options used by the default label formatter
maxTicksLimitnumberYes11Maximum number of ticks and gridlines to show.
precisionnumberYesif defined and stepSize is not specified, the step size will be rounded to this many decimal places.
stepSizenumberYesUser-defined fixed step size for the scale. more…

Common tick options to all cartesian axes

Namespace: options.scales[scaleId].ticks

NameTypeDefaultDescription
alignstring‘center’The tick alignment along the axis. Can be ‘start’, ‘center’, or ‘end’.
crossAlignstring‘near’The tick alignment perpendicular to the axis. Can be ‘near’, ‘center’, or ‘far’. See Tick Alignment
sampleSizenumberticks.lengthThe number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
autoSkipbooleantrueIf true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
autoSkipPaddingnumber3Padding between the ticks on the horizontal axis when autoSkip is enabled.
includeBoundsbooleantrueShould the defined min and max values be presented as ticks even if they are not “nice”.
labelOffsetnumber0Distance in pixels to offset the label from the centre point of the tick (in the x-direction for the x-axis, and the y-direction for the y-axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas
maxRotationnumber50Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn’t occur until necessary. Note: Only applicable to horizontal scales.
minRotationnumber0Minimum rotation for tick labels. Note: Only applicable to horizontal scales.
mirrorbooleanfalseFlips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.
paddingnumber0Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.

Common tick options to all axes

Namespace: options.scales[scaleId].ticks

NameTypeScriptableDefaultDescription
backdropColorColorYes‘rgba(255, 255, 255, 0.75)’Color of label backdrops.
backdropPaddingPadding2Padding of label backdrop.
callbackfunctionReturns the string representation of the tick value as it should be displayed on the chart. See callback.
displaybooleantrueIf true, show tick labels.
colorColorYesChart.defaults.colorColor of ticks.
fontFontYesChart.defaults.fontSee Fonts
majorobject{}Major ticks configuration.
paddingnumber3Sets the offset of the tick labels from the axis
showLabelBackdropbooleanYestrue for radial scale, false otherwiseIf true, draw a background behind the tick labels.
textStrokeColorColorYes``The color of the stroke around the text.
textStrokeWidthnumberYes0Stroke width around the text.
znumber0z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

Step Size

If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.

This example sets up a chart with a y axis that creates ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

  1. let options = {
  2. scales: {
  3. y: {
  4. max: 5,
  5. min: 0,
  6. ticks: {
  7. stepSize: 0.5
  8. }
  9. }
  10. }
  11. };

Grace

If the value is string ending with %, its treat as percentage. If number, its treat as value. The value is added to the maximum data value and subtracted from the minimum data. This extends the scale range as if the data values were that much greater.

Linear Axis - 图2

config setup

  1. const config = {
  2. type: 'bar',
  3. data,
  4. options: {
  5. scales: {
  6. y: {
  7. type: 'linear',
  8. grace: '5%'
  9. }
  10. },
  11. plugins: {
  12. legend: false
  13. }
  14. }
  15. };
  1. const labels = Utils.months({count: 7});
  2. const data = {
  3. labels: ['Positive', 'Negative'],
  4. datasets: [{
  5. data: [100, -50],
  6. backgroundColor: 'rgb(255, 99, 132)'
  7. }],
  8. };

Internal data format

Internally, the linear scale uses numeric data