Graphty

Appearance

API Reference ​

Graphty provides two distinct APIs for different use cases.

Choose Your API ​

Web Component API ​

Declarative configuration via HTML attributes and element properties.

Use this API when you want:

  • HTML-based configuration
  • Framework integration (React, Vue, Angular, Svelte)
  • Reactive property binding
  • Simple graphs configured via attributes
html
<graphty-element
  layout="ngraph"
  view-mode="3d"
  node-data='[{"id": "a"}, {"id": "b"}]'
  edge-data='[{"source": "a", "target": "b"}]'>
</graphty-element>

View Web Component API →

JavaScript API ​

Programmatic control via the Graph class.

Use this API when you need:

  • Dynamic data manipulation (add/remove nodes at runtime)
  • Algorithm execution and result handling
  • Camera control and animation
  • Custom style layers
  • Screenshot and video capture
typescript
const graph = element.graph;

await graph.addNodes([{ id: 'a' }, { id: 'b' }]);
await graph.runAlgorithm('graphty', 'degree');
graph.zoomToFit();

View JavaScript API →

Quick Comparison ​

FeatureWeb ComponentJavaScript API
Set initial data✅ node-data attribute✅ addNodes() method
Add data dynamically❌ Replaces all data✅ Appends to existing
Set layout✅ layout attribute✅ setLayout() method
Run algorithms❌✅ runAlgorithm()
Camera control✅ Limited via methods✅ Full control
Custom styles✅ style-template✅ addStyleLayer()
Event handling✅ addEventListener()✅ graph.on()
Screenshot/Video✅ Via element methods✅ Via graph methods

Configuration Types ​

GraphtyConfig ​

Main configuration object:

typescript
interface GraphtyConfig {
  layout?: string;
  layoutOptions?: object;
  styleTemplate?: string;
  viewMode?: '2d' | '3d' | 'vr' | 'ar';
  debug?: boolean;
}

StyleSchema ​

Style configuration:

typescript
interface StyleSchema {
  layers: StyleLayer[];
}

interface StyleLayer {
  selector: string;
  priority?: number;
  styles: {
    node?: NodeStyle;
    edge?: EdgeStyle;
    label?: LabelStyle;
  };
}

NodeStyle ​

Node appearance options:

typescript
interface NodeStyle {
  color?: string | ((node: Node) => string);
  size?: number | ((node: Node) => number);
  shape?: string;
  opacity?: number;
  texture?: string;
}

EdgeStyle ​

Edge appearance options:

typescript
interface EdgeStyle {
  line?: {
    type?: string;
    width?: number;
    color?: string;
    opacity?: number;
    bezier?: boolean;
  };
  arrowHead?: {
    type?: string;
    size?: number;
    color?: string;
  };
  arrowTail?: {
    type?: string;
    size?: number;
    color?: string;
  };
}

LabelStyle ​

Label appearance options:

typescript
interface LabelStyle {
  text?: string | ((element: Node | Edge) => string);
  fontSize?: number;
  fontColor?: string;
  position?: string;
  offset?: Vector3;
}

Generated TypeDoc Reference ​

For complete type definitions auto-generated from TypeScript source:

Web Component

JavaScript API

Configuration Types

Extension Base Classes