or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

axes.mdbar-charts.mdevents.mdindex.mdinterpolation.mdline-charts.mdpie-charts.mdsvg-utilities.mdutils.md
tile.json

index.mddocs/

Chartist

Chartist is a simple, responsive charting library built with SVG that provides developers with a lightweight solution for creating charts in web applications. It emphasizes using web standards with inline-SVG, CSS styling, and JavaScript configuration, offering multiple chart types with a chainable API and built-in responsive design capabilities.

Package Information

  • Package Name: chartist
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install chartist

Core Imports

import { LineChart, BarChart, PieChart } from "chartist";

For CommonJS:

const { LineChart, BarChart, PieChart } = require("chartist");

Additional imports for advanced usage:

import { 
  LineChart, 
  BarChart, 
  PieChart,
  AutoScaleAxis,
  FixedScaleAxis,
  StepAxis,
  Interpolation,
  Svg,
  EventEmitter
} from "chartist";

Basic Usage

import { LineChart } from "chartist";

// Simple line chart
const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [5, 2, 4, 2, 0]
  ]
};

const options = {
  width: 300,
  height: 200
};

// Create chart
const chart = new LineChart('.ct-chart', data, options);

// Handle events
chart.on('draw', (data) => {
  console.log('Drawing:', data.type);
});

Architecture

Chartist is built around several key components:

  • Chart Classes: LineChart, BarChart, PieChart extending BaseChart with specific chart functionality
  • Data Processing: Normalization, bounds calculation, and series management for chart rendering
  • SVG System: Svg, SvgPath, SvgList classes providing fluent API for SVG manipulation
  • Axis System: AutoScaleAxis, FixedScaleAxis, StepAxis for data scaling and positioning
  • Event System: EventEmitter for chart lifecycle and interaction events
  • Interpolation: Various interpolation methods for smooth line rendering
  • Responsive Design: Built-in responsive options and media query support

Capabilities

Line Charts

Create line charts with optional areas, points, and smooth interpolation. Supports multiple series, responsive design, and extensive customization options.

class LineChart extends BaseChart {
  constructor(
    query: string | Element | null,
    data: LineChartData,
    options?: LineChartOptions,
    responsiveOptions?: ResponsiveOptions<LineChartOptions>[]
  );
}

interface LineChartData {
  labels?: string[];
  series: (number[] | SeriesObject)[];
}

interface SeriesObject {
  name?: string;
  data: number[];
  className?: string;
  meta?: any;
}

Line Charts

Bar Charts

Create vertical or horizontal bar charts with support for stacked bars, multiple series, and responsive layouts.

class BarChart extends BaseChart {
  constructor(
    query: string | Element | null,
    data: BarChartData,
    options?: BarChartOptions,
    responsiveOptions?: ResponsiveOptions<BarChartOptions>[]
  );
}

interface BarChartData {
  labels?: string[];
  series: (number[] | SeriesObject)[];
}

Bar Charts

Pie Charts

Create pie and donut charts with customizable angles, labels, and styling options.

class PieChart extends BaseChart {
  constructor(
    query: string | Element | null,
    data: PieChartData,
    options?: PieChartOptions,
    responsiveOptions?: ResponsiveOptions<PieChartOptions>[]
  );
}

interface PieChartData {
  series: number[] | SeriesObject[];
  labels?: string[];
}

Pie Charts

SVG Utilities

Low-level SVG manipulation classes for creating and animating chart elements with a fluent, chainable API.

class Svg {
  constructor(name: string, attributes?: SvgAttributes, className?: string, parent?: Svg | Element, insertFirst?: boolean);
  
  attr(attributes: SvgAttributes): Svg;
  elem(name: string, attributes?: SvgAttributes, className?: string, insertFirst?: boolean): Svg;
  text(text: string): Svg;
  empty(): Svg;
  remove(): Svg;
}

SVG Utilities

Axes System

Flexible axis system supporting auto-scaling, fixed scales, and step-based divisions for precise data positioning.

class AutoScaleAxis extends Axis {
  constructor(axisUnit: AxisUnit, data: number[], chartRect: ChartRect, options: AutoScaleAxisOptions);
}

class FixedScaleAxis extends Axis {
  constructor(axisUnit: AxisUnit, data: number[], chartRect: ChartRect, options: FixedScaleAxisOptions);
}

class StepAxis extends Axis {
  constructor(axisUnit: AxisUnit, data: number[], chartRect: ChartRect, options: StepAxisOptions);
}

Axes System

Interpolation

Line interpolation functions for creating smooth curves in line charts, including cardinal splines and monotone cubic interpolation.

namespace Interpolation {
  function none(options?: InterpolationOptions): InterpolationFunction;
  function simple(options?: InterpolationOptions): InterpolationFunction;
  function step(options?: InterpolationOptions): InterpolationFunction;
  function cardinal(options?: CardinalInterpolationOptions): InterpolationFunction;
  function monotoneCubic(options?: InterpolationOptions): InterpolationFunction;
}

Interpolation

Event System

Event-driven architecture for handling chart lifecycle events, draw events, and user interactions.

class EventEmitter {
  on(event: string, listener: EventListener): EventEmitter;
  off(event: string, listener?: EventListener): EventEmitter;
  emit(event: string, data?: any): boolean;
}

type EventListener = (data: any) => void;

Event System

Core Utilities

Essential utility functions for chart creation, data processing, mathematical operations, and type checking.

/**
 * Create SVG element for chart container
 * @param container - DOM element to contain the SVG
 * @param width - SVG width (default: "100%")
 * @param height - SVG height (default: "100%") 
 * @param className - Optional CSS class name
 */
function createSvg(
  container: Element,
  width?: number | string,
  height?: number | string,
  className?: string
): Svg;

/**
 * Normalize padding value to ChartPadding object
 * @param padding - Number or partial padding object
 */
function normalizePadding(
  padding: number | Partial<ChartPadding> | undefined
): ChartPadding;

/**
 * Create chart rectangle for drawing area
 * @param svg - SVG container element
 * @param options - Chart options with padding
 */
function createChartRect(svg: Svg, options: Options): ChartRect;

/**
 * Normalize chart data for processing
 * @param data - Raw chart data
 * @param reverse - Reverse data order
 * @param multi - Multi-dimensional data handling
 * @param distributed - Distributed series handling
 */
function normalizeData(
  data: Data, 
  reverse?: boolean, 
  multi?: boolean | AxisName, 
  distributed?: boolean
): NormalizedData;

/**
 * Get high and low values from data series
 * @param data - Normalized series data
 * @param options - Chart options
 * @param dimension - Optional axis dimension
 */
function getHighLow(
  data: NormalizedSeries[], 
  options: Options, 
  dimension?: AxisName
): { high: number; low: number };

/**
 * Check if value is numeric
 * @param value - Value to test
 */
function isNumeric(value: unknown): boolean;

/**
 * Safely check if object has property
 * @param target - Target object
 * @param property - Property to check
 */
function safeHasProperty<T, K>(target: T, property: K): boolean;

Utility Functions

Constants

/** SVG namespace constants */
const namespaces: {
  svg: string;
  xmlns: string;
  xhtml: string;
  xlink: string;
  ct: string;
};

/** Rounding precision for calculations */
const precision: number;

/** Character escaping map for safe attribute values */
const escapingMap: {
  '&': string;
  '<': string;
  '>': string;
  '"': string;
  "'": string;
};

Common Types

interface ResponsiveOptions<T = any> {
  [mediaQuery: string]: Partial<T>;
}

interface ChartPadding {
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}

interface ChartRect {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  width(): number;
  height(): number;
}

interface Meta {
  [key: string]: any;
}

interface Options<TXAxisOptions = any, TYAxisOptions = any> {
  width?: number;
  height?: number;
  chartPadding?: ChartPadding;
  axisX?: TXAxisOptions;
  axisY?: TYAxisOptions;
  showGrid?: boolean;
  fullWidth?: boolean;
  plugins?: Plugin[];
}

interface Plugin {
  name?: string;
  initialize?: (chart: any) => void;
  [key: string]: any;
}

interface Data<T = any> {
  labels?: string[];
  series: T[];
}

interface Series<T = any> {
  name?: string;
  data: T[];
  className?: string;
  meta?: any;
}

interface SeriesObject extends Series<number> {}

interface FlatSeriesValue {
  x?: number;
  y?: number;
  [key: string]: any;
}

interface Multi {
  x?: number;
  y?: number;
}

interface NormalizedSeries {
  data: number[];
  name?: string;
  className?: string;
  meta?: any;
}

interface NormalizedData {
  series: NormalizedSeries[];
  labels?: string[];
}

interface Bounds {
  min: number;
  max: number;
  step: number;
}

interface Label {
  value: any;
  position: number;
}

interface AxisOptions {
  offset?: number;
  showLabel?: boolean;
  showGrid?: boolean;
  labelInterpolationFnc?: (value: any, index: number) => string;
  referenceValue?: number;
  scaleMinSpace?: number;
  onlyInteger?: boolean;
  high?: number;
  low?: number;
}

type AxisName = 'x' | 'y';