Skip to content
AstroChart Logo AstroChart

Settings Reference

Settings Reference

Section titled “Settings Reference”

All settings are passed as a plain object to the Chart constructor. Every key is optional — omitted keys fall back to the values listed here.

import { Chart } from '@astrodraw/astrochart'
const chart = new Chart('chart', 600, 600, { /* settings here */ })

General

Section titled “General”
SettingTypeDefaultDescription
SYMBOL_SCALEnumber1Global scale multiplier for all rendered symbols
COLOR_BACKGROUNDstring'#fff'SVG canvas background fill color
MARGINnumber50Outer margin in pixels
PADDINGnumber18Inner padding in pixels
SHIFT_IN_DEGREESnumber180Chart rotation offset; 180 places 0° on the left (West)
STROKE_ONLYbooleanfalseRender all symbols as outlines — no fill
ADD_CLICK_AREAbooleanfalseAdd invisible click-target areas; required for click events
COLLISION_RADIUSnumber10Planet collision-avoidance radius in px (at SYMBOL_SCALE: 1)
DEBUGbooleanfalsePrint internal debug information to the browser console

Points / Planets

Section titled “Points / Planets”
SettingTypeDefaultDescription
POINTS_COLORstring'#000'Fill/stroke color for planet symbols
POINTS_TEXT_SIZEnumber8Font size in px for the text next to each planet (angle, retrograde, dignity)
POINTS_STROKEnumber1.8Stroke width for planet symbols

Signs

Section titled “Signs”
SettingTypeDefaultDescription
SIGNS_COLORstring'#000'Color for zodiac sign symbols
SIGNS_STROKEnumber1.5Stroke width for zodiac sign symbols
COLOR_ARIESstring'#FF4500'Sector color — Aries
COLOR_TAURUSstring'#8B4513'Sector color — Taurus
COLOR_GEMINIstring'#87CEEB'Sector color — Gemini
COLOR_CANCERstring'#27AE60'Sector color — Cancer
COLOR_LEOstring'#FF4500'Sector color — Leo
COLOR_VIRGOstring'#8B4513'Sector color — Virgo
COLOR_LIBRAstring'#87CEEB'Sector color — Libra
COLOR_SCORPIOstring'#27AE60'Sector color — Scorpio
COLOR_SAGITTARIUSstring'#FF4500'Sector color — Sagittarius
COLOR_CAPRICORNstring'#8B4513'Sector color — Capricorn
COLOR_AQUARIUSstring'#87CEEB'Sector color — Aquarius
COLOR_PISCESstring'#27AE60'Sector color — Pisces
COLORS_SIGNSstring[](array of the 12 above in order)Ordered array of all 12 sign sector colors

Circles & Lines

Section titled “Circles & Lines”
SettingTypeDefaultDescription
CIRCLE_COLORstring'#333'Color of chart ring circles
CIRCLE_STRONGnumber2Stroke width for circles
LINE_COLORstring'#333'Color of house spoke lines
INDOOR_CIRCLE_RADIUS_RATIOnumber2radius / INDOOR_CIRCLE_RADIUS_RATIO determines the inner-most circle size
INNER_CIRCLE_RADIUS_RATIOnumber8radius - radius/INNER_CIRCLE_RADIUS_RATIO determines the planet ring inner edge
RULER_RADIUSnumber4(radius / INNER_CIRCLE_RADIUS_RATIO) / RULER_RADIUS determines degree ruler band width

Axis & Cusps

Section titled “Axis & Cusps”
SettingTypeDefaultDescription
SYMBOL_ASstring'As'Ascendant axis label text
SYMBOL_DSstring'Ds'Descendant axis label text
SYMBOL_MCstring'Mc'Midheaven axis label text
SYMBOL_ICstring'Ic'Imum Coeli axis label text
SYMBOL_AXIS_FONT_COLORstring'#333'Color for As/Ds/Mc/Ic labels
SYMBOL_AXIS_STROKEnumber1.6Stroke width for axis labels
CUSPS_STROKEnumber1Stroke width for cusp dividing lines
CUSPS_FONT_COLORstring'#000'Color of cusp number labels
SYMBOL_CUSP_1string'1'Label for cusp 1
SYMBOL_CUSP_2string'2'Label for cusp 2
SYMBOL_CUSP_3string'3'Label for cusp 3
SYMBOL_CUSP_4string'4'Label for cusp 4
SYMBOL_CUSP_5string'5'Label for cusp 5
SYMBOL_CUSP_6string'6'Label for cusp 6
SYMBOL_CUSP_7string'7'Label for cusp 7
SYMBOL_CUSP_8string'8'Label for cusp 8
SYMBOL_CUSP_9string'9'Label for cusp 9
SYMBOL_CUSP_10string'10'Label for cusp 10
SYMBOL_CUSP_11string'11'Label for cusp 11
SYMBOL_CUSP_12string'12'Label for cusp 12

Symbol Text (Planets & Signs)

Section titled “Symbol Text (Planets & Signs)”

These settings control which key name is used to look up each symbol in the built-in symbol renderer. Changing them only makes sense if you have custom symbol definitions that use different keys.

SettingTypeDefault
SYMBOL_SUNstring'Sun'
SYMBOL_MOONstring'Moon'
SYMBOL_MERCURYstring'Mercury'
SYMBOL_VENUSstring'Venus'
SYMBOL_MARSstring'Mars'
SYMBOL_JUPITERstring'Jupiter'
SYMBOL_SATURNstring'Saturn'
SYMBOL_URANUSstring'Uranus'
SYMBOL_NEPTUNEstring'Neptune'
SYMBOL_PLUTOstring'Pluto'
SYMBOL_CHIRONstring'Chiron'
SYMBOL_LILITHstring'Lilith'
SYMBOL_NNODEstring'NNode'
SYMBOL_SNODEstring'SNode'
SYMBOL_FORTUNEstring'Fortune'
SYMBOL_ARIESstring'Aries'
SYMBOL_TAURUSstring'Taurus'
SYMBOL_GEMINIstring'Gemini'
SYMBOL_CANCERstring'Cancer'
SYMBOL_LEOstring'Leo'
SYMBOL_VIRGOstring'Virgo'
SYMBOL_LIBRAstring'Libra'
SYMBOL_SCORPIOstring'Scorpio'
SYMBOL_SAGITTARIUSstring'Sagittarius'
SYMBOL_CAPRICORNstring'Capricorn'
SYMBOL_AQUARIUSstring'Aquarius'
SYMBOL_PISCESstring'Pisces'
SYMBOL_SIGNSstring[]['Aries', 'Taurus', ..., 'Pisces']

Custom Symbols

Section titled “Custom Symbols”
SettingTypeDefaultDescription
CUSTOM_SYMBOL_FN((name: string, x: number, y: number, context: SVG) => Element) | nullnullCustom symbol renderer. Return a valid SVG Element, or null/undefined to fall back to the built-in symbol for that name.

See the Custom Symbols guide for full examples.

Aspects

Section titled “Aspects”
SettingTypeDefaultDescription
ASPECTSRecord<string, { degree: number, orbit: number, color: string }>(see below)Aspect definitions. Each key is an aspect name; the value defines its degree, allowed orb, and line color.

Default value:

{
  conjunction: { degree: 0,   orbit: 10, color: 'transparent' },
  square:      { degree: 90,  orbit: 8,  color: '#FF4500' },
  trine:       { degree: 120, orbit: 8,  color: '#27AE60' },
  opposition:  { degree: 180, orbit: 10, color: '#27AE60' }
}

You can add any custom aspects — for example, a sextile:

const chart = new Chart('chart', 600, 600, {
  ASPECTS: {
    conjunction: { degree: 0,   orbit: 10, color: 'transparent' },
    sextile:     { degree: 60,  orbit: 6,  color: '#3498db' },
    square:      { degree: 90,  orbit: 8,  color: '#FF4500' },
    trine:       { degree: 120, orbit: 8,  color: '#27AE60' },
    opposition:  { degree: 180, orbit: 10, color: '#27AE60' }
  }
})

Dignities

Section titled “Dignities”
SettingTypeDefaultDescription
SHOW_DIGNITIES_TEXTbooleantrueShow dignity labels next to planet symbols
DIGNITIES_RULERSHIPstring'r'Label shown when a planet is in its rulership sign
DIGNITIES_DETRIMENTstring'd'Label shown when a planet is in detriment
DIGNITIES_EXALTATIONstring'e'Label shown when a planet is in exaltation
DIGNITIES_EXACT_EXALTATIONstring'E'Label shown when a planet is at its exact degree of exaltation
DIGNITIES_FALLstring'f'Label shown when a planet is in fall
DIGNITIES_EXACT_EXALTATION_DEFAULTDignity[](Crowley positions)Array of { name, position, orbit } defining exact exaltation degrees

Default DIGNITIES_EXACT_EXALTATION_DEFAULT:

[
  { name: 'Sun',     position: 19,  orbit: 2 }, // 19° Aries
  { name: 'Moon',    position: 33,  orbit: 2 }, // 3° Taurus
  { name: 'Mercury', position: 155, orbit: 2 }, // 15° Virgo
  { name: 'Venus',   position: 357, orbit: 2 }, // 27° Pisces
  { name: 'Mars',    position: 298, orbit: 2 }, // 28° Capricorn
  { name: 'Jupiter', position: 105, orbit: 2 }, // 15° Cancer
  { name: 'Saturn',  position: 201, orbit: 2 }, // 21° Libra
  { name: 'NNode',   position: 63,  orbit: 2 }, // 3° Gemini
]

Animation

Section titled “Animation”
SettingTypeDefaultDescription
ANIMATION_CUSPS_ROTATION_SPEEDnumber2Speed of the transit cusps rotation animation. Valid range: 0–4.

Internal IDs

Section titled “Internal IDs”

These settings control the id attributes applied to SVG group elements inside the chart. You should not change these unless you have a specific reason (e.g. avoiding conflicts with other SVG elements on the page).

SettingDefault
ID_CHART'astrology'
ID_RADIX'radix'
ID_TRANSIT'transit'
ID_ASPECTS'aspects'
ID_POINTS'planets'
ID_SIGNS'signs'
ID_CIRCLES'circles'
ID_AXIS'axis'
ID_CUSPS'cusps'
ID_RULER'ruler'
ID_BG'bg'
Section titled “Related”