Chartist provides low-level SVG manipulation classes that offer a fluent, chainable API for creating and animating chart elements. These utilities are used internally by the chart classes but can also be used directly for custom chart implementations.
Main SVG wrapper class providing fluent API for SVG element creation and manipulation.
/**
* SVG element wrapper with fluent API for creation and manipulation
* @param name - SVG element name (e.g., 'svg', 'g', 'path', 'circle')
* @param attributes - Element attributes as key-value pairs
* @param className - CSS class name(s)
* @param parent - Parent element (Svg instance or DOM element)
* @param insertFirst - Insert as first child instead of last
*/
class Svg {
constructor(
name: string,
attributes?: SvgAttributes,
className?: string,
parent?: Svg | Element,
insertFirst?: boolean
);
/** Set or get element attributes */
attr(attributes: SvgAttributes): Svg;
attr(name: string): string;
attr(name: string, value: string | number): Svg;
/** Create child element */
elem(
name: string,
attributes?: SvgAttributes,
className?: string,
insertFirst?: boolean
): Svg;
/** Set text content */
text(text: string): Svg;
/** Remove all child elements */
empty(): Svg;
/** Remove element from DOM */
remove(): Svg;
/** Replace element with another */
replace(newElement: Svg): Svg;
/** Append element to parent */
append(parent: Svg | Element, insertFirst?: boolean): Svg;
/** Create foreign object element */
foreignObject(
content: HTMLElement,
attributes?: SvgAttributes
): Svg;
/** Get class list as DOMTokenList */
classes(): DOMTokenList;
/** Add CSS class */
addClass(className: string): Svg;
/** Remove CSS class */
removeClass(className: string): Svg;
/** Remove all CSS classes */
removeAllClasses(): Svg;
/** Get computed height of element */
height(): number;
/** Get computed width of element */
width(): number;
/** Query all descendant elements */
querySelectorAll(selector: string): SvgList;
/** Query single descendant element */
querySelector(selector: string): Svg | null;
/** Get native DOM element */
getNode(): Element;
/** Animate element properties */
animate(
animationDefinition: AnimationDefinition,
createGuided?: boolean,
eventEmitter?: EventEmitter
): Svg;
/** Static easing functions (deprecated) */
static Easing: any;
}
interface SvgAttributes {
[key: string]: string | number;
}Usage Examples:
import { Svg } from "chartist";
// Create SVG container
const svg = new Svg('svg', {
width: 400,
height: 300,
viewBox: '0 0 400 300'
}, 'ct-chart', document.querySelector('.chart-container'));
// Create chart group
const chartGroup = svg.elem('g', {
transform: 'translate(40, 20)'
}, 'ct-grids');
// Create line path
const linePath = chartGroup.elem('path', {
d: 'M10,150 Q100,50 200,150 T400,150',
stroke: '#d70206',
'stroke-width': 2,
fill: 'none'
}, 'ct-line');
// Add animation
linePath.attr({
'stroke-dasharray': '300',
'stroke-dashoffset': '300'
}).animate({
'stroke-dashoffset': 0
}, 1000, 'easeOutQuint');Specialized class for creating and manipulating SVG path elements.
/**
* SVG path manipulation class with path command builders
* @param close - Whether to auto-close the path
* @param options - Path creation options
*/
class SvgPath {
constructor(close?: boolean, options?: SvgPathOptions);
/** Move command (absolute or relative) */
move(
x: number,
y: number,
relative?: boolean,
data?: SegmentData
): SvgPath;
/** Line command (absolute or relative) */
line(
x: number,
y: number,
relative?: boolean,
data?: SegmentData
): SvgPath;
/** Cubic Bézier curve command */
curve(
x1: number, y1: number,
x2: number, y2: number,
x: number, y: number,
relative?: boolean,
data?: SegmentData
): SvgPath;
/** Arc command */
arc(
rx: number, ry: number,
xAr: number,
lAf: number,
sf: number,
x: number, y: number,
relative?: boolean,
data?: SegmentData
): SvgPath;
/** Close path */
close(): SvgPath;
/** Convert path to string */
stringify(): string;
/** Clone path with optional new options */
clone(options?: SvgPathOptions): SvgPath;
/** Transform path elements */
transform(
transformFn: (
pathElement: PathCommand,
index: number,
pathElements: PathCommand[]
) => void
): SvgPath;
/** Get path element at index */
position(index: number): PathCommand | undefined;
/** Remove path element at index */
remove(index: number): SvgPath;
/** Replace path element at index */
replace(index: number, command: PathCommand): SvgPath;
/** Parse path string into commands */
parse(path: string): SvgPath;
/** Split path into multiple paths */
split(splitOptions?: { command?: string }): SvgPath[];
/** Join multiple paths into one */
static join(paths: SvgPath[], close?: boolean): SvgPath;
}Usage Examples:
import { SvgPath } from "chartist";
// Create complex path
const path = new SvgPath()
.moveTo(10, 50)
.lineTo(100, 20)
.curveTo(120, 10, 140, 30, 160, 50)
.quadraticCurveTo(180, 80, 200, 50)
.close();
// Create area path
const areaPath = new SvgPath()
.moveTo(0, 200)
.lineTo(50, 150)
.lineTo(100, 100)
.lineTo(150, 120)
.lineTo(200, 80)
.lineTo(200, 200)
.close();Collection class for managing multiple SVG elements with batch operations.
/**
* Collection of SVG elements with batch operation support
* @param elements - Array of Svg elements or nodes
*/
class SvgList {
constructor(elements?: (Svg | Element)[]);
/** Number of elements in list */
length: number;
/** Get element at index */
get(index: number): Svg;
/** Execute function on each element */
forEach(callback: (element: Svg, index: number) => void): SvgList;
/** Apply attributes to all elements */
attr(attributes: SvgAttributes): SvgList;
attr(name: string, value: string | number): SvgList;
/** Add class to all elements */
addClass(className: string): SvgList;
/** Remove class from all elements */
removeClass(className: string): SvgList;
/** Remove all elements from DOM */
remove(): SvgList;
/** Empty all elements */
empty(): SvgList;
}Usage Examples:
import { Svg, SvgList } from "chartist";
// Create multiple elements
const svg = new Svg('svg');
const circles = new SvgList([
svg.elem('circle', { cx: 50, cy: 50, r: 10 }),
svg.elem('circle', { cx: 100, cy: 50, r: 10 }),
svg.elem('circle', { cx: 150, cy: 50, r: 10 })
]);
// Apply attributes to all circles
circles.attr({
fill: '#d70206',
stroke: '#fff',
'stroke-width': 2
});
// Add animation to all circles
circles.forEach((circle, index) => {
circle.attr({
opacity: 0
}).animate({
opacity: 1
}, 300 * (index + 1), 'easeOutQuint');
});Easing functions for smooth SVG animations.
namespace easings {
/** Linear easing function */
function easeLinear(t: number): number;
/** Ease in quad function */
function easeInQuad(t: number): number;
/** Ease out quad function */
function easeOutQuad(t: number): number;
/** Ease in-out quad function */
function easeInOutQuad(t: number): number;
/** Ease in cubic function */
function easeInCubic(t: number): number;
/** Ease out cubic function */
function easeOutCubic(t: number): number;
/** Ease in-out cubic function */
function easeInOutCubic(t: number): number;
/** Ease in quart function */
function easeInQuart(t: number): number;
/** Ease out quart function */
function easeOutQuart(t: number): number;
/** Ease in-out quart function */
function easeInOutQuart(t: number): number;
/** Ease in quint function */
function easeInQuint(t: number): number;
/** Ease out quint function */
function easeOutQuint(t: number): number;
/** Ease in-out quint function */
function easeInOutQuint(t: number): number;
}SVG elements support animation through the animate method.
// Animation method available on Svg class
interface Svg {
/**
* Animate element properties
* @param properties - CSS properties to animate
* @param duration - Animation duration in milliseconds
* @param easing - Easing function name or custom function
* @param callback - Optional callback when animation completes
*/
animate(
properties: { [property: string]: string | number },
duration: number,
easing?: string | ((t: number) => number),
callback?: () => void
): Svg;
}Animation Examples:
// Animate path drawing
const path = svg.elem('path', {
d: 'M10,50 L200,50',
'stroke-dasharray': '200',
'stroke-dashoffset': '200'
});
path.animate({
'stroke-dashoffset': 0
}, 1000, 'easeOutQuint');
// Animate element appearance
const circle = svg.elem('circle', {
cx: 100,
cy: 100,
r: 0,
opacity: 0
});
circle.animate({
r: 20,
opacity: 1
}, 500, 'easeOutCubic');Low-level function for creating SVG animations.
/**
* Create SVG animation element
* @param element - Target SVG element
* @param attribute - Attribute to animate
* @param animationDefinition - Animation configuration
* @param createGuided - Whether to create guided animation
* @param eventEmitter - Optional event emitter for animation events
* @returns DOM animation element
*/
function createAnimation(
element: Svg,
attribute: string,
animationDefinition: AnimationDefinition,
createGuided?: boolean,
eventEmitter?: EventEmitter
): Element;interface SvgPathOptions {
close?: boolean;
}
interface SegmentData {
value: number;
meta: any;
}
interface PathCommand<T = any> {
command: string;
params: T;
}
interface AnimationDefinition {
from?: any;
to?: any;
dur?: number;
fill?: string;
calcMode?: string;
values?: any[];
keyTimes?: number[];
keySplines?: string[];
begin?: string;
onBegin?: () => void;
onEnd?: () => void;
}
interface AnimationEvent {
type: 'animationBegin' | 'animationEnd';
element: Svg;
animate?: any;
easing?: string | Function;
from?: any;
to?: any;
duration?: number;
}
type SvgAttributes = Record<string, string | number>;