F2's scale system provides comprehensive data mapping capabilities for converting data values into visual representations. Built on a flexible architecture, it supports various scale types for different data patterns and visualization needs.
Foundation scale class with common functionality for all scale types.
/**
* Base scale class providing core scaling functionality
*/
abstract class Scale {
constructor(cfg: ScaleConfig);
/** Transform data value to visual coordinate */
scale(value: any): any;
/** Transform visual coordinate back to data value */
invert(value: any): any;
/** Get array of tick values */
getTicks(): Tick[];
/** Get scale domain (data range) */
getDomain(): any[];
/** Get scale range (visual range) */
getRange(): any[];
/** Set scale domain */
setDomain(domain: any[]): void;
/** Set scale range */
setRange(range: any[]): void;
}
/**
* Scale configuration interface
*/
interface ScaleConfig {
/** Scale type identifier */
type?: string;
/** Data domain [min, max] or categorical values */
domain?: any[];
/** Visual range [min, max] */
range?: any[];
/** Number of ticks to generate */
tickCount?: number;
/** Custom tick values */
ticks?: any[];
/** Value formatter function */
formatter?: (value: any, index: number) => string;
/** Whether scale is nice (rounded bounds) */
nice?: boolean;
/** Minimum tick interval */
minTickInterval?: number;
/** Maximum tick interval */
maxTickInterval?: number;
}
/**
* Tick mark definition
*/
interface Tick {
/** Tick value */
value: any;
/** Tick text label */
text: string;
/** Tick position (0-1) */
tickValue: number;
}Continuous linear scale for numerical data.
/**
* Linear scale for continuous numerical data
*/
class Linear extends Scale {
constructor(cfg: LinearConfig);
}
/**
* Linear scale configuration
*/
interface LinearConfig extends ScaleConfig {
/** Minimum value in domain */
min?: number;
/** Maximum value in domain */
max?: number;
/** Whether to include zero in domain */
includeZero?: boolean;
/** Tick interval */
tickInterval?: number;
}Usage Examples:
import { Linear } from "@antv/f2";
// Basic linear scale
const linearScale = new Linear({
domain: [0, 100],
range: [0, 200],
tickCount: 6
});
// Scale with formatting
const salesScale = new Linear({
domain: [0, 1000000],
range: [0, 300],
formatter: (value) => `$${(value / 1000).toFixed(0)}K`,
nice: true
});
// Chart usage
<Chart
data={data}
scale={{
sales: {
type: 'linear',
tickCount: 5,
formatter: (val) => `$${val.toLocaleString()}`
}
}}
>
<Axis field="sales" />
<Interval x="month" y="sales" />
</Chart>Discrete scale for categorical data.
/**
* Category scale for discrete categorical data
*/
class Category extends Scale {
constructor(cfg: CategoryConfig);
}
/**
* Category scale configuration
*/
interface CategoryConfig extends ScaleConfig {
/** Category values */
values?: string[];
/** Whether to include null values */
includeNull?: boolean;
}Usage Examples:
import { Category } from "@antv/f2";
// Basic category scale
const categoryScale = new Category({
values: ['A', 'B', 'C', 'D'],
range: [0, 200]
});
// Chart usage
<Chart
data={data}
scale={{
category: {
type: 'cat',
values: ['Mobile', 'Desktop', 'Tablet']
}
}}
>
<Axis field="category" />
<Interval x="category" y="value" />
</Chart>Continuous scale for time/date data.
/**
* Time scale for temporal data
*/
class Time extends Scale {
constructor(cfg: TimeConfig);
}
/**
* Time scale configuration
*/
interface TimeConfig extends ScaleConfig {
/** Time format mask */
mask?: string;
/** Whether input is timestamp */
isTime?: boolean;
}Usage Examples:
import { Time } from "@antv/f2";
// Time scale
const timeScale = new Time({
domain: [new Date('2023-01-01'), new Date('2023-12-31')],
range: [0, 300],
tickCount: 6,
formatter: (date) => date.toLocaleDateString()
});
// Chart usage
<Chart
data={timeData}
scale={{
date: {
type: 'time',
mask: 'YYYY-MM-DD',
tickCount: 5,
formatter: (val) => new Date(val).toLocaleDateString()
}
}}
>
<Axis field="date" />
<Line x="date" y="value" />
</Chart>Categorical scale for time periods.
/**
* TimeCat scale for time-based categories
*/
class TimeCat extends Scale {
constructor(cfg: TimeCatConfig);
}
/**
* TimeCat scale configuration
*/
interface TimeCatConfig extends ScaleConfig {
/** Time format mask */
mask?: string;
/** Time values array */
values?: string[];
}Usage Examples:
import { TimeCat } from "@antv/f2";
// Time category scale
<Chart
data={monthlyData}
scale={{
month: {
type: 'timeCat',
mask: 'MM',
values: ['01', '02', '03', '04', '05', '06']
}
}}
>
<Axis field="month" />
<Interval x="month" y="sales" />
</Chart>Logarithmic scale for exponential data.
/**
* Log scale for exponential data patterns
*/
class Log extends Scale {
constructor(cfg: LogConfig);
}
/**
* Log scale configuration
*/
interface LogConfig extends ScaleConfig {
/** Logarithm base (default: 10) */
base?: number;
}Usage Examples:
import { Log } from "@antv/f2";
// Logarithmic scale
<Chart
data={exponentialData}
scale={{
value: {
type: 'log',
base: 10,
tickCount: 5,
formatter: (val) => `10^${Math.log10(val)}`
}
}}
>
<Axis field="value" />
<Point x="time" y="value" />
</Chart>Power (exponential) scale for power relationships.
/**
* Pow scale for power/exponential relationships
*/
class Pow extends Scale {
constructor(cfg: PowConfig);
}
/**
* Pow scale configuration
*/
interface PowConfig extends ScaleConfig {
/** Power exponent */
exponent?: number;
}Usage Examples:
import { Pow } from "@antv/f2";
// Power scale
<Chart
data={powerData}
scale={{
area: {
type: 'pow',
exponent: 0.5, // Square root
tickCount: 4
}
}}
>
<Axis field="area" />
<Point x="radius" y="area" />
</Chart>Quantized scale for mapping continuous data to discrete values.
/**
* Quantize scale for discrete bucketing of continuous data
*/
class Quantize extends Scale {
constructor(cfg: QuantizeConfig);
}
/**
* Quantize scale configuration
*/
interface QuantizeConfig extends ScaleConfig {
/** Number of quantiles */
quantiles?: number;
}Quantile scale for statistical data distribution.
/**
* Quantile scale for statistical distributions
*/
class Quantile extends Scale {
constructor(cfg: QuantileConfig);
}
/**
* Quantile scale configuration
*/
interface QuantileConfig extends ScaleConfig {
/** Quantile thresholds */
quantiles?: number[];
}Pass-through scale that returns input values unchanged.
/**
* Identity scale that passes values through unchanged
*/
class Identity extends Scale {
constructor(cfg: ScaleConfig);
}Factory functions for creating and registering scales.
/**
* Get scale instance by type and configuration
* @param type Scale type identifier
* @param cfg Scale configuration
* @returns Scale instance
*/
function getScale(type: string, cfg: ScaleConfig): Scale;
/**
* Register custom scale type
* @param type Scale type identifier
* @param ScaleClass Scale constructor class
*/
function registerScale(type: string, ScaleClass: typeof Scale): void;Usage Examples:
import { getScale, registerScale } from "@antv/f2";
// Create scale using factory
const scale = getScale('linear', {
domain: [0, 100],
range: [0, 200],
tickCount: 5
});
// Register custom scale
class CustomScale extends Scale {
// Custom scale implementation
}
registerScale('custom', CustomScale);
// Use custom scale
const customScale = getScale('custom', { /* config */ });Tick generation utilities for customizing axis marks.
/**
* Get tick generation method
* @param key Method identifier
* @returns Tick generation function
*/
function getTickMethod(key: string): (cfg: any) => any[];
/**
* Register custom tick generation method
* @param key Method identifier
* @param method Tick generation function
*/
function registerTickMethod(key: string, method: (cfg: any) => any[]): void;Usage Examples:
import { getTickMethod, registerTickMethod } from "@antv/f2";
// Register custom tick method
registerTickMethod('fibonacci', (cfg) => {
const { min, max, tickCount } = cfg;
// Generate Fibonacci sequence ticks
return [1, 1, 2, 3, 5, 8, 13, 21].filter(n => n >= min && n <= max);
});
// Use custom tick method
<Chart
data={data}
scale={{
fibonacci: {
type: 'linear',
tickMethod: 'fibonacci'
}
}}
>
<Axis field="fibonacci" />
</Chart>