tessl/npm-chartist

Simple, responsive SVG charts built with web standards for creating line, bar, and pie charts

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Axes System

Name: tessl/npm-chartist
Author: tessl

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.

Capabilities

AutoScaleAxis Class

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];
    }
  }
);

FixedScaleAxis Class

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`
  }
);

StepAxis Class

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];
    }
  }
);

Base Axis Class

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;
}

Axis Units

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;
}

Axis Creation Functions

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}%`
});

Install with Tessl CLI