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]

Common options to all cartesian axes

Namespace: options.scales[scaleId]

Common options to all axes

Namespace: options.scales[scaleId]

Tick Configuration

Linear Axis specific tick options

Namespace: options.scales[scaleId].ticks

Name	Type	Scriptable	Default	Description
count	number	Yes	undefined	The number of ticks to generate. If specified, this overrides the automatic generation.
format	object	Yes		The Intl.NumberFormat (opens new window) options used by the default label formatter
maxTicksLimit	number	Yes	11	Maximum number of ticks and gridlines to show.
precision	number	Yes		if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
stepSize	number	Yes		User-defined fixed step size for the scale. more…

Common tick options to all cartesian axes

Namespace: options.scales[scaleId].ticks

Common tick options to all axes

Namespace: options.scales[scaleId].ticks

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.

let options = {
    scales: {
        y: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};

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.

config setup

const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      y: {
        type: 'linear',
        grace: '5%'
      }
    },
    plugins: {
      legend: false
    }
  }
};

const labels = Utils.months({count: 7});
const data = {
  labels: ['Positive', 'Negative'],
  datasets: [{
    data: [100, -50],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};

Internal data format

Internally, the linear scale uses numeric data