Graphty

Appearance

Styling ​

Comprehensive guide to styling nodes, edges, and labels.

Overview ​

Graphty uses a CSS-like layer-based styling system. Styles are applied through layers, with later layers overriding earlier ones. JMESPath selectors target specific elements.

Style Templates ​

The quickest way to style your graph is with built-in templates:

html
<graphty-element style-template="dark"></graphty-element>

Available templates:

  • dark - Dark theme with light elements
  • light - Light theme with dark elements

Style Layers ​

Styles are organized in layers with priorities. Higher priority layers override lower ones:

typescript
// Add a style layer
graph.styleManager.addLayer({
    selector: "*", // Apply to all elements
    priority: 10, // Higher = applied later
    styles: {
        node: {
            color: "#3498db",
            size: 1.0,
        },
        edge: {
            line: { color: "#ffffff" },
        },
    },
});

Layer Precedence ​

  1. Default styles (priority 0)
  2. Template styles (priority 5)
  3. Custom layers (your priority)
  4. Selection styles (priority 100)

Selectors ​

Selectors use JMESPath syntax to target elements:

typescript
// All elements
{
    selector: "*";
}

// Specific node by ID
{
    selector: "[?id == 'node1']";
}

// Nodes with a property value
{
    selector: "[?category == 'important']";
}

// Numeric comparison
{
    selector: "[?weight > `5`]";
}

// Multiple conditions (AND)
{
    selector: "[?category == 'type-a' && weight > `3`]";
}

// Based on algorithm results
{
    selector: "[?algorithmResults.'graphty:degree' > `10`]";
}

Node Styles ​

Available Properties ​

PropertyTypeDefaultDescription
colorstring'#ffffff'Node color (hex or CSS color)
sizenumber1.0Size multiplier
shapestring'sphere'Node shape
opacitynumber1.0Transparency (0-1)
texturestringundefinedImage URL for texture
labelobject{}Label configuration

Node Shapes ​

Available shapes:

  • sphere (default)
  • box
  • cylinder
  • cone
  • torus
  • tetrahedron
  • octahedron
  • icosahedron
  • dodecahedron
typescript
graph.styleManager.addLayer({
    selector: "[?category == 'server']",
    styles: {
        node: {
            shape: "box",
            color: "#2ecc71",
            size: 1.5,
        },
    },
});

Node Examples ​

typescript
// Color by category
graph.styleManager.addLayer({
    selector: "[?category == 'primary']",
    styles: { node: { color: "#e74c3c" } },
});

graph.styleManager.addLayer({
    selector: "[?category == 'secondary']",
    styles: { node: { color: "#3498db" } },
});

// Size by importance
graph.styleManager.addLayer({
    selector: "[?importance == 'high']",
    styles: { node: { size: 2.0 } },
});

Edge Styles ​

Line Properties ​

PropertyTypeDefaultDescription
line.typestring'solid'Line pattern
line.widthnumber0.5Line width
line.colorstring'#ffffff'Line color
line.opacitynumber1.0Transparency (0-1)
line.bezierbooleanfalseCurved edges

Line Types ​

  • solid (default)
  • dash
  • dot
  • dash-dot
  • zigzag
  • sinewave
  • star
  • diamond

Arrow Properties ​

PropertyTypeDefaultDescription
arrowHead.typestring'normal'Arrow head style
arrowHead.sizenumber1.0Size multiplier
arrowHead.colorstringundefinedColor (defaults to line color)
arrowTail.typestring'none'Arrow tail style

Arrow Types ​

  • none - No arrow
  • normal - Standard triangle
  • inverted - Reversed triangle
  • vee - Open triangle
  • diamond - Diamond shape
  • box - Square
  • dot - Circle
  • sphere - 3D sphere
  • tee - T-shape
  • crow - Crow's foot (for ER diagrams)
  • half-open - Partial triangle

Edge Examples ​

typescript
// Dashed edges for weak connections
graph.styleManager.addLayer({
    selector: "[?weight < `0.5`]",
    styles: {
        edge: {
            line: { type: "dash", opacity: 0.5 },
        },
    },
});

// Bidirectional arrows
graph.styleManager.addLayer({
    selector: "[?bidirectional == `true`]",
    styles: {
        edge: {
            arrowHead: { type: "normal" },
            arrowTail: { type: "normal" },
        },
    },
});

// Curved edges
graph.styleManager.addLayer({
    selector: "*",
    styles: {
        edge: {
            line: { bezier: true },
        },
    },
});

Label Styles ​

Label Properties ​

PropertyTypeDefaultDescription
textstringundefinedLabel text
fontSizenumber12Font size
fontColorstring'#ffffff'Text color
positionstring'top'Position relative to node
offsetobject{x:0,y:0,z:0}Position offset
typescript
graph.styleManager.addLayer({
    selector: "*",
    styles: {
        label: {
            text: (node) => node.label || node.id,
            fontSize: 14,
            fontColor: "#ffffff",
            position: "top",
        },
    },
});

Dynamic Styling ​

Use functions to compute styles dynamically:

typescript
graph.styleManager.addLayer({
    selector: "*",
    styles: {
        node: {
            color: (node) => {
                const degree = node.algorithmResults["graphty:degree"] || 0;
                return degree > 5 ? "#e74c3c" : "#3498db";
            },
            size: (node) => {
                const degree = node.algorithmResults["graphty:degree"] || 0;
                return 0.5 + degree * 0.1;
            },
        },
    },
});

StyleManager API ​

typescript
// Add a layer
const layerId = graph.styleManager.addLayer(layerConfig);

// Remove a layer
graph.styleManager.removeLayer(layerId);

// Clear all custom layers
graph.styleManager.clearLayers();

// Get computed style for a node
const nodeStyle = graph.styleManager.getNodeStyle(node);
const edgeStyle = graph.styleManager.getEdgeStyle(edge);

Interactive Examples ​