Interactive Natal Chart Demo

Explore the features and capabilities of the Nocturna Wheel.js library. This SVG-based astrological chart visualization provides a beautiful and interactive way to display natal charts.

Natal Chart

Chart Controls

Houses
Primary Planets (Outer Circle)
Secondary Planets (Inner Circle)
Primary Aspects (Outer Circle)
Secondary Aspects (Inner Circle)
Synastry Aspects (Outer ↔ Inner)

Documentation

Getting Started

// Install via npm
npm install nocturna-wheel

// Or include directly in your HTML
<script src="https://unpkg.com/nocturna-wheel/dist/nocturna-wheel.min.js"></script>

Basic Usage

// Create chart instance
const chart = new NocturnaWheel({
    container: 'chart-container',
    planets: {
        sun: { lon: 85.83 },
        moon: { lon: 133.21 },
        // ... other planets
    },
    houses: [
        { lon: 300.32 },  // 1st house cusp
        // ... other houses
    ]
});

// Render the chart
chart.render();

// Toggle features
chart.togglePlanet('pluto', false);
chart.toggleHouses(false);
chart.togglePrimaryPlanets(true);
chart.toggleSecondaryPlanets(true);

Dual Charts (Synastry, Transits)

// Create dual chart with independent inner and outer circles
const wheelChart = new WheelChart({
    container: 'chart-container',
    // Natal chart (outer circle)
    planets: {
        sun: { lon: 85.83, color: '#000000' },
        moon: { lon: 133.21, color: '#000000' },
        // ... other natal planets
    },
    // Transit/Partner chart (inner circle)
    secondaryPlanets: {
        sun: { lon: 115.20, color: '#FF5500' },
        moon: { lon: 200.45, color: '#0066CC' },
        // ... other transit/partner planets
    },
    houses: [
        { lon: 300.32 },  // 1st house cusp
        // ... other houses
    ],
    config: {
        radius: {
            innermost: 90 // Radius for the inner circle
        },
        // Three independent aspect systems
        primaryAspectSettings: { /* natal-to-natal */ },
        secondaryAspectSettings: { /* transit-to-transit */ },
        synastryAspectSettings: { /* natal-to-transit */ }
    }
});

// Render the dual chart
wheelChart.render();

// Control each aspect type independently
wheelChart.togglePrimaryAspects(true);   // Outer circle aspects
wheelChart.toggleSecondaryAspects(false); // Inner circle aspects
wheelChart.toggleSynastryAspects(true);   // Cross-circle aspects

Configuration Options

The Nocturna Wheel.js library provides extensive configuration options:

  • Dual chart support - Independent inner and outer circles
  • Three aspect systems - Primary, Secondary, and Synastry aspects
  • Multiple house systems - Placidus, Koch, Equal, and more
  • Custom colors and styling - Full control over colors, line styles, and thickness
  • Projection dots - Hollow circles showing outer planet projections
  • Custom icon sets - Use your own planet and sign symbols
  • Interactive tooltips - Hover information for all elements

For more detailed documentation, please visit the GitHub repository.