Custom Shape

Custom shape nodes provide extensive visual variety through built-in geometric shapes and unlimited custom SVG paths. These nodes enable you to create visually distinctive tree structures where different shapes can represent different categories, types, or hierarchical levels.

With 9 built-in geometric shapes plus custom SVG path support, you can create highly visual and categorized tree visualizations that enhance user understanding through shape-based visual encoding.

Features

• 9 Built-in Shapes - Complete geometric shape library for immediate use
• Custom SVG Paths - Create any shape using standard SVG path syntax
• Visual Categorization - Use shapes to represent different data types or categories
• Consistent Styling - All shapes support the same styling options (colors, borders, gradients)
• Flexible Positioning - Shapes automatically position and scale within node dimensions
• Professional Appearance - Clean, precise geometric shapes for polished visualizations

Built-in Shape Types

TreeCharts provides 9 geometric shapes out of the box:

Basic Shapes: "rectangle" (default), "circle", "ellipse", "diamond", "triangle"

Polygon Shapes: "pentagon", "hexagon", "octagon", "star"

Simply set the type property in your nodeConfig to use any of these shapes. For example: type: "hexagon" or type: "star".

Shape Configuration

Set the shape type using the type property in nodeConfig:

const nodeConfig = {
  type: "circle",        // Shape type
  color: "#98FB98",      // Fill color
  borderColor: "#666",   // Border color
  borderWidth: 2,        // Border thickness
  width: 80,             // Node width
  height: 60             // Node height
};

Custom SVG Paths

For unlimited shape possibilities, use the "custom" type with SVG path data:

const customNodeConfig = {
  type: "custom",
  color: "#FF6B6B",
  customAttributes: {
    d: "M 40,20 C 40,15 35,10 25,10 C 15,10 10,15 10,25 C 10,35 40,55 40,55 C 40,55 70,35 70,25 C 70,15 65,10 55,10 C 45,10 40,15 40,20 Z"
  }
};

SVG Path Syntax

Custom paths use standard SVG path commands:

• M x,y - Move to coordinates
• L x,y - Line to coordinates
• C x1,y1 x2,y2 x,y - Cubic Bézier curve
• Q x1,y1 x,y - Quadratic Bézier curve
• A rx,ry rotation large-arc sweep x,y - Arc
• Z - Close path

Path Coordinate System

• Paths are positioned relative to the node's coordinate system
• Use coordinates that fit within your node dimensions (width × height)
• The transform positioning is handled automatically
• Recommended to design paths within 0-80 × 0-60 coordinate space for standard nodes

Custom Attributes

For custom shapes, additional SVG attributes can be specified:

All other styling properties (colors, borders, gradients, shadows, text) work the same as regular nodes - see the Regular Nodes documentation for complete styling options.

Advanced Examples

Multi-Shape Categorization

const orgChart = {
  value: "Company",
  nodeConfig: { type: "hexagon", color: "#2c3e50" },
  child: [
    {
      value: "Executive Team",
      nodeConfig: { type: "diamond", color: "#e74c3c" },
      child: [
        { value: "CEO", nodeConfig: { type: "star", color: "#f39c12" } },
        { value: "CTO", nodeConfig: { type: "star", color: "#f39c12" } }
      ]
    },
    {
      value: "Departments",
      nodeConfig: { type: "pentagon", color: "#3498db" },
      child: [
        { value: "Engineering", nodeConfig: { type: "circle", color: "#27ae60" } },
        { value: "Marketing", nodeConfig: { type: "triangle", color: "#9b59b6" } }
      ]
    }
  ]
};

Custom SVG Heart Shape

const heartNode = {
  value: "Love",
  nodeConfig: {
    type: "custom",
    color: "#e91e63",
    borderWidth: 2,
    borderColor: "#ad1457",
    customAttributes: {
      d: "M 40,20 C 40,15 35,10 25,10 C 15,10 10,15 10,25 C 10,35 40,55 40,55 C 40,55 70,35 70,25 C 70,15 65,10 55,10 C 45,10 40,15 40,20 Z"
    }
  }
};

Arrow Shape with Custom Path

const arrowNode = {
  value: "Next",
  nodeConfig: {
    type: "custom",
    color: "#4caf50",
    customAttributes: {
      d: "M 10,20 L 50,20 L 50,10 L 70,30 L 50,50 L 50,40 L 10,40 Z"
    }
  }
};

Shape Design Guidelines

Built-in Shapes

• Circles: Best for representing people, completion states, or equal entities
• Diamonds: Ideal for decision points, critical nodes, or gateways
• Triangles: Perfect for hierarchical indicators, warnings, or directional flow
• Hexagons: Great for processes, systems, or technical components
• Stars: Excellent for highlights, achievements, or featured items
• Pentagons/Octagons: Useful for specialized categories or unique classifications

Custom Shape Design

• Size Appropriately: Design paths to fit within standard node dimensions (80×60)
• Consider Text Space: Leave room for text labels within the shape
• Use Consistent Styling: Maintain visual coherence with border widths and colors
• Test Readability: Ensure text remains legible over the shape background
• Optimize Complexity: Balance visual appeal with rendering performance

Common Use Cases

Process Flow Diagrams

Different shapes represent different process types (diamond for decisions, circle for start/end, rectangle for actions).

Organizational Charts

Shape hierarchy to show different organizational levels (star for executives, diamond for directors, circle for managers).

System Architecture

Technical diagrams using hexagons for services, circles for databases, triangles for external systems.

Decision Trees

Diamonds for decision points, circles for outcomes, rectangles for actions.

Network Diagrams

Custom shapes for different network components, routers, servers, and connections.