Natal Chart Wheel Component

A natal chart wheel web component that draws every planet, house cusp and aspect from a birth date, time and city, built by RoxyAPI. It is part of @roxyapi/ui, the UI components for RoxyAPI: one API key across 18+ insight domains, from Western and Vedic astrology to Human Design, tarot and numerology.

Copy and paste

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<roxy-natal-chart data-endpoint="astrology/natal-chart" publishable-key="pk_live_YOUR_KEY" hide-sections="hint"></roxy-natal-chart>

Two lines, any page, no build step. The element renders a birth data form with a city search, calls the RoxyAPI natal chart endpoint on submit and draws the wheel. Replace pk_live_YOUR_KEY with a publishable key from your RoxyAPI account and add each site you embed on to the allowed origins of that key.

Run the demo

git clone https://github.com/RoxyAPI/natal-chart-wheel.git
cd natal-chart-wheel
npx serve .

Put your publishable key in index.html, add your local address to its allowed origins, and open the page. Enter a date, a time and a birth city and the wheel renders as in the screenshot above.

React and Next.js

Install one package, @roxyapi/ui-react. It carries the response types, so nothing else is needed to render.

'use client';
import { RoxyNatalChart } from '@roxyapi/ui-react';

export function BirthChart() {
	return <RoxyNatalChart endpoint="astrology/natal-chart" publishableKey={process.env.NEXT_PUBLIC_ROXY_PK} hideSections="hint" />;
}

To keep every key on your server, fetch with the TypeScript SDK and pass the response as data. Geocode the birth city first, then send its coordinates and timezone to the chart.

// app/page.tsx (Server Component)
import { createRoxy } from '@roxyapi/sdk';
import { ChartView } from './chart-view';

const roxy = createRoxy(process.env.ROXY_API_KEY!);

export default async function Page() {
	const { data: places } = await roxy.location.searchCities({ query: { q: 'London' } });
	const { latitude, longitude, timezone } = places.cities[0];
	const { data } = await roxy.astrology.generateNatalChart({
		body: { date: '1990-07-15', time: '14:30:00', latitude, longitude, timezone },
	});
	return <ChartView data={data} />;
}

// app/chart-view.tsx (Client Component)
'use client';
import { RoxyNatalChart, type RoxyNatalChartProps } from '@roxyapi/ui-react';

export function ChartView({ data }: { data: RoxyNatalChartProps['data'] }) {
	return <RoxyNatalChart data={data} />;
}

Vue and Nuxt use @roxyapi/ui-vue with the same component and prop names. Svelte, Angular, Astro and plain HTML use the <roxy-natal-chart> tag directly.

What does the natal chart wheel show?

The zodiac ring with sign glyphs, the twelve house cusps with their degrees, every planet and point placed by degree with a retrograde marker, the Ascendant, Descendant, Midheaven and IC, and aspect lines coloured harmonious or challenging. Below the wheel it adds an aspect grid tab, the element and modality balance, detected chart patterns such as T-squares and stelliums, and a reading for every planet in its sign and house.

Which house systems does it support?

Placidus, Whole Sign, Equal and Koch, with a Mean or True lunar node. The built-in form offers each as a choice, and the legend under the wheel names the system the chart was cast in.

How accurate are the planet positions?

Every position comes from Roxy Ephemeris, which reads the NASA JPL DE440 ephemeris directly and is verified against NASA JPL Horizons. The method and the measured deviation are published on the methodology page.

Can I use my own data instead of the built-in form?

Yes. Leave out data-endpoint and set the data property to a natal chart response you fetched on your server, or render the response into a child <script type="application/json" class="roxy-data"> block for server-rendered pages. The component draws the same wheel either way.

How do I theme it or switch to dark mode?

Set one token and every chart on the page follows: :root { --roxy-accent: #8b5cf6; }. Dark mode works with no wiring, through the visitor system setting, a .dark class or data-theme="dark" on any ancestor. Every token is listed in the theming guide.

Can the readings be hidden or translated?

Add hide-readings to keep the wheel and drop the written interpretation. Set lang on the element or the page (de, es, fr, hi, pt, ru, tr and more) and the readings come back in that language.

Resources

• Every component, live: roxyapi.com/ui
• Source and full docs: github.com/RoxyAPI/ui
• Natal chart endpoint: roxyapi.com/products/astrology-api
• Plans and keys: roxyapi.com/pricing
• More: Kundli chart component, Human Design bodygraph component

License

MIT. See LICENSE.