Chartist's axis system provides flexible scaling and positioning for chart data. The system includes auto-scaling axes that adjust to data ranges, fixed-scale axes for precise control, and step-based axes for regular intervals.
Automatically scales axis based on data range with configurable bounds and spacing.
/**
* Auto-scaling axis that adjusts to data range
* @param axisUnit - Axis unit configuration (X or Y axis)
* @param data - Data array for scaling calculations
* @param chartRect - Chart drawing rectangle
* @param options - Auto-scale specific options
*/
class AutoScaleAxis extends Axis {
constructor(
axisUnit: AxisUnit,
data: number[],
chartRect: ChartRect,
options: AutoScaleAxisOptions
);
}
interface AutoScaleAxisOptions {
/** Desired number of ticks on axis */
scaleMinSpace?: number;
/** Only use integer values */
onlyInteger?: boolean;
/** Reference value for axis positioning */
referenceValue?: number;
/** High value override */
high?: number;
/** Low value override */
low?: number;
/** Show axis labels */
showLabel?: boolean;
/** Show grid lines */
showGrid?: boolean;
/** Axis offset from chart edge */
offset?: number;
/** Label interpolation function */
labelInterpolationFnc?: (value: any, index: number) => string;
}Usage Examples:
import { AutoScaleAxis, axisUnits } from "chartist";
// Create auto-scaling Y axis
const yAxis = new AutoScaleAxis(
axisUnits.y,
[10, 20, 15, 30, 25],
chartRect,
{
scaleMinSpace: 20,
onlyInteger: true,
labelInterpolationFnc: (value) => `$${value}`
}
);
// Create auto-scaling X axis with date formatting
const xAxis = new AutoScaleAxis(
axisUnits.x,
[1, 2, 3, 4, 5],
chartRect,
{
labelInterpolationFnc: (value, index) => {
const dates = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
return dates[index];
}
}
);Uses a fixed scale with specified minimum and maximum values.
/**
* Fixed scale axis with specified bounds
* @param axisUnit - Axis unit configuration (X or Y axis)
* @param data - Data array (used for tick generation)
* @param chartRect - Chart drawing rectangle
* @param options - Fixed scale specific options
*/
class FixedScaleAxis extends Axis {
constructor(
axisUnit: AxisUnit,
data: number[],
chartRect: ChartRect,
options: FixedScaleAxisOptions
);
}
interface FixedScaleAxisOptions {
/** Fixed high value */
high: number;
/** Fixed low value */
low: number;
/** Fixed divisor for scale */
divisor?: number;
/** Number of ticks to generate */
ticks?: number[];
/** Show axis labels */
showLabel?: boolean;
/** Show grid lines */
showGrid?: boolean;
/** Axis offset from chart edge */
offset?: number;
/** Label interpolation function */
labelInterpolationFnc?: (value: any, index: number) => string;
}Usage Examples:
import { FixedScaleAxis, axisUnits } from "chartist";
// Create fixed scale Y axis from 0 to 100
const yAxis = new FixedScaleAxis(
axisUnits.y,
data,
chartRect,
{
high: 100,
low: 0,
divisor: 4, // Creates 4 divisions (0, 25, 50, 75, 100)
labelInterpolationFnc: (value) => `${value}%`
}
);
// Create fixed scale with custom ticks
const customAxis = new FixedScaleAxis(
axisUnits.y,
data,
chartRect,
{
high: 1000,
low: 0,
ticks: [0, 100, 250, 500, 750, 1000],
labelInterpolationFnc: (value) => `${value / 1000}k`
}
);Creates evenly spaced steps along the axis, ideal for categorical data.
/**
* Step-based axis with evenly distributed ticks
* @param axisUnit - Axis unit configuration (X or Y axis)
* @param data - Data array for step calculation
* @param chartRect - Chart drawing rectangle
* @param options - Step axis specific options
*/
class StepAxis extends Axis {
constructor(
axisUnit: AxisUnit,
data: number[],
chartRect: ChartRect,
options: StepAxisOptions
);
}
interface StepAxisOptions {
/** Stretch axis to use full length */
stretch?: boolean;
/** Show axis labels */
showLabel?: boolean;
/** Show grid lines */
showGrid?: boolean;
/** Axis offset from chart edge */
offset?: number;
/** Label interpolation function */
labelInterpolationFnc?: (value: any, index: number) => string;
}Usage Examples:
import { StepAxis, axisUnits } from "chartist";
// Create step axis for categories
const xAxis = new StepAxis(
axisUnits.x,
data,
chartRect,
{
stretch: true,
labelInterpolationFnc: (value, index) => {
const categories = ['Category A', 'Category B', 'Category C'];
return categories[index];
}
}
);
// Create step axis for time periods
const timeAxis = new StepAxis(
axisUnits.x,
data,
chartRect,
{
stretch: false,
labelInterpolationFnc: (value, index) => {
const periods = ['Q1', 'Q2', 'Q3', 'Q4'];
return periods[index];
}
}
);Abstract base class providing common axis functionality.
/**
* Abstract base class for all axis types
*/
abstract class Axis {
/** Axis unit configuration */
axisUnit: AxisUnit;
/** Chart drawing rectangle */
chartRect: ChartRect;
/** Axis bounds */
bounds: AxisBounds;
/** Axis range */
range: AxisRange;
/** Axis step information */
step: number;
/** Get position for given value */
projectValue(value: number): number;
/** Get ticks for axis */
ticks: AxisTick[];
}
interface AxisUnit {
pos: string;
len: string;
dir: number;
rectStart: string;
rectEnd: string;
rectOffset: string;
}
interface AxisBounds {
high: number;
low: number;
}
interface AxisRange {
min: number;
max: number;
}
interface AxisTick {
value: number;
position: number;
}Predefined axis unit configurations for X and Y axes.
namespace axisUnits {
/** X-axis unit configuration */
const x: AxisUnit;
/** Y-axis unit configuration */
const y: AxisUnit;
}Utility functions for creating axes with chart data.
/**
* Create appropriate axis based on options
* @param axisUnit - X or Y axis unit
* @param data - Chart data
* @param chartRect - Chart rectangle
* @param options - Axis options
*/
function createAxis(
axisUnit: AxisUnit,
data: number[],
chartRect: ChartRect,
options: any
): Axis;
/**
* Get bounds from data
* @param data - Data array
* @param options - Options with potential high/low overrides
*/
function getBounds(data: number[], options: any): AxisBounds;Advanced Axis Examples:
// Multi-axis chart configuration
const chartOptions = {
axisX: new StepAxis(axisUnits.x, xData, chartRect, {
stretch: true,
labelInterpolationFnc: (value, index) => labels[index]
}),
axisY: new AutoScaleAxis(axisUnits.y, yData, chartRect, {
scaleMinSpace: 30,
onlyInteger: false,
labelInterpolationFnc: (value) => `${value.toFixed(1)}°C`
})
};
// Dual Y-axis setup (requires custom implementation)
const leftYAxis = new AutoScaleAxis(axisUnits.y, leftData, chartRect, {
position: 'start',
labelInterpolationFnc: (value) => `$${value}`
});
const rightYAxis = new AutoScaleAxis(axisUnits.y, rightData, chartRect, {
position: 'end',
labelInterpolationFnc: (value) => `${value}%`
});