Linear and Logarithmic Scales

Relevant source files

• src/core/core.scale.js
• src/core/core.ticks.js
• src/scales/scale.category.js
• src/scales/scale.linear.js
• src/scales/scale.linearbase.js
• src/scales/scale.logarithmic.js
• src/scales/scale.radialLinear.js
• src/scales/scale.time.js
• test/fixtures/scale.linear/grace/grace-10%.js
• test/fixtures/scale.linear/grace/grace-10%.png
• test/fixtures/scale.linear/grace/grace-beginAtZero.js
• test/fixtures/scale.linear/grace/grace-beginAtZero.png
• test/fixtures/scale.linear/grace/grace-neg.js
• test/fixtures/scale.linear/grace/grace-pos.js
• test/fixtures/scale.linear/grace/grace.js
• test/fixtures/scale.linear/min-max-skip/rotated-case-1.png
• test/fixtures/scale.linear/min-max-skip/rotated-case-2.png
• test/fixtures/scale.linear/min-max-skip/rotated-case-3.png
• test/fixtures/scale.linear/min-max-skip/rotated-case-4.png
• test/fixtures/scale.linear/rotated-45.png
• test/fixtures/scale.linear/rotated-5.png
• test/fixtures/scale.linear/rotated-85.png
• test/specs/core.helpers.tests.js
• test/specs/core.ticks.tests.js
• test/specs/scale.category.tests.js
• test/specs/scale.linear.tests.js
• test/specs/scale.logarithmic.tests.js
• test/specs/scale.radialLinear.tests.js
• test/specs/scale.time.tests.js

Purpose and Scope

This page documents the LinearScale and LogarithmicScale implementations in Chart.js, which handle continuous numeric data visualization. These scales transform numeric data values into pixel coordinates and generate appropriate tick marks for axes.

For information about the base scale architecture and lifecycle methods, see Scale Architecture and Lifecycle. For details on time-based scales, see Time Scale. For discrete label-based scales, see Category and Radial Scales.

Sources: src/scales/scale.linear.js1-52 src/scales/scale.logarithmic.js1-227

Scale Class Hierarchy

Sources: src/core/core.scale.js168-170 src/scales/scale.linearbase.js154-168 src/scales/scale.linear.js6-9 src/scales/scale.logarithmic.js74-76

LinearScale Implementation

Overview

LinearScale provides evenly-spaced numeric scales for continuous data. It extends LinearScaleBase which contains the tick generation algorithm shared with other linear-based scales like RadialLinearScale.

Sources: src/scales/scale.linear.js6-51 src/scales/scale.linearbase.js154-313 src/scales/scale.radialLinear.js4-5

Data Limit Determination

The determineDataLimits() method calculates the scale's min and max values by examining all associated datasets:

Sources: src/scales/scale.linear.js20-28 src/scales/scale.linearbase.js181-211

Tick Limit Calculation

The computeTickLimit() method determines the maximum number of ticks based on available space:

The algorithm considers:

• Available axis length (width or height).
• Label rotation angle (minRotation).
• Font line height.
• Minimum 40 pixels per tick (default spacing constant).

Sources: src/scales/scale.linear.js34-41

Pixel-to-Value Transformations

LinearScale implements coordinate transformations using decimals:

Method	Formula	Purpose
getPixelForValue(value)	getPixelForDecimal((value - this._startValue) / this._valueRange)	Convert data value to pixel coordinate
getValueForPixel(pixel)	this._startValue + getDecimalForPixel(pixel) * this._valueRange	Convert pixel coordinate to data value

Sources: src/scales/scale.linear.js44-50 src/scales/scale.linearbase.js293-308

LogarithmicScale Implementation

Overview

LogarithmicScale handles exponentially-distributed data using base-10 logarithmic transformations.

Sources: src/scales/scale.logarithmic.js74-226

Zero and Negative Value Handling

Logarithmic scales cannot display zero or negative values. The parse() method filters these and sets an internal flag:

When data contains zero (_zero = true), the scale adjusts the minimum bound by one order of magnitude to ensure visibility if beginAtZero is active.

Sources: src/scales/scale.logarithmic.js103-129

Tick Generation Algorithm

The logarithmic tick generation creates major ticks at powers of 10 and minor ticks (significands) in between:

Sources: src/scales/scale.logarithmic.js16-72

Major vs Minor Ticks

A tick is considered "major" if it represents a pure power of 10:

Sources: src/scales/scale.logarithmic.js11-14

LinearScaleBase Tick Generation

Both LinearScale and other linear-based scales share the tick generation logic from LinearScaleBase:

Sources: src/scales/scale.linearbase.js244-288

The generateTicks Function

The core algorithm uses a "nice number" approach to find readable intervals:

1. Spacing Calculation: Uses niceNum((rmax - rmin) / maxSpaces / unit) * unit to find a round number interval.
2. Constraint Checking: Validates against MIN_SPACING (1e-14) to prevent floating point errors.
3. Bound Fitting: If bounds === 'ticks', calculates niceMin and niceMax by flooring/ceiling data limits to the nearest spacing interval.
4. Rounding: Applies precision if defined by the user.

Sources: src/scales/scale.linearbase.js25-145

Tick Formatting

Formatting is handled by src/core/core.ticks.js:

Numeric Formatter

Used by LinearScale. It determines the number of decimal places based on the spacing (delta) between ticks to ensure every label is unique and readable.

Sources: src/core/core.ticks.js28-60

Logarithmic Formatter

Used by LogarithmicScale. It filters which ticks show labels:

• Major ticks (1, 10, 100...) are always labeled.
• Selected minor ticks (significands 2, 3, 5, 15) are labeled.
• Ticks in the final 20% of the scale range are labeled to ensure the end of the scale is clear.

Sources: src/core/core.ticks.js71-80

Configuration Options

Option	Scale	Default	Description
beginAtZero	Both	false	Force the scale to include 0
min	Both	undefined	User-defined minimum
max	Both	undefined	User-defined maximum
suggestedMin	Both	undefined	Minimum value if not exceeded by data
ticks.stepSize	Linear	undefined	Fixed interval between ticks
ticks.count	Linear	undefined	Fixed number of ticks to generate
ticks.major.enabled	Log	true	Enable major tick styling

Sources: src/scales/scale.linear.js13-17 src/scales/scale.logarithmic.js81-88 src/scales/scale.linearbase.js181-198