Skip to main content
Scales are responsible for converting data values to pixel coordinates on the canvas. Kinetix Charts provides multiple scale types to handle different data formats.

​
Scale interface

The base interface that all scale implementations must follow.
​
type
ScaleType
The type of scale: "linear", "log", "time", or "categorical"
​
domain
any[]
The input data range. For numeric scales, this is [number, number]. For categorical scales, this is string[]
​
range
[number, number]
The output pixel range as [start, end]

​
Methods

​
toPixels
(value: number | string) => number
Converts a data value to pixel coordinates
const pixels = scale.toPixels(100);
​
invert
(pixels: number) => number | string
Converts pixel coordinates back to data values
const value = scale.invert(250);

​
LinearScale

Maps numeric values to pixels using linear interpolation.

​
Constructor

new LinearScale(domain: [number, number], range: [number, number])
​
domain
[number, number]
required
The minimum and maximum data values
​
range
[number, number]
required
The minimum and maximum pixel coordinates

​
Example

const scale = new LinearScale([0, 100], [0, 500]);
const pixels = scale.toPixels(50); // Returns 250
const value = scale.invert(250); // Returns 50

​
LogScale

Maps numeric values to pixels using logarithmic scaling, useful for data that spans multiple orders of magnitude.

​
Constructor

new LogScale(domain: [number, number], range: [number, number])
​
domain
[number, number]
required
The minimum and maximum data values (must be positive)
​
range
[number, number]
required
The minimum and maximum pixel coordinates

​
Example

const scale = new LogScale([1, 1000], [0, 500]);
const pixels = scale.toPixels(10); // Logarithmic mapping

​
CategoricalScale

Maps categorical (string) values to evenly-spaced positions on the axis.

​
Constructor

new CategoricalScale(domain: string[], range: [number, number])
​
domain
string[]
required
Array of category labels
​
range
[number, number]
required
The minimum and maximum pixel coordinates

​
Properties

​
padding
number
default:"0.5"
Controls spacing between categories

​
Example

const scale = new CategoricalScale(
  ["Q1", "Q2", "Q3", "Q4"],
  [0, 400]
);
const pixels = scale.toPixels("Q2"); // Returns centered position for Q2
const category = scale.invert(200); // Returns the category at pixel 200

​
Notes

  • Categories are automatically centered within their bands
  • The toPixels method accepts either a category string or a numeric index
  • Returns empty string from invert if pixels are outside the range

Build docs developers (and LLMs) love

Get started for freeTalk to us