Docs: how to style the zodiac sign ring border (CIRCLE_COLOR, CIRCLE_STRONG, INNER_CIRCLE_RADIUS_RATIO)

[afucher]

Context

Issue #87 asks: "How can I add a border to the area of Zodiac signs?"

The zodiac sign ring is the coloured band between the outer chart edge and the planet ring. Its border appearance is controlled by geometry and circle settings, but there is no guide or example explaining which settings to change and what visual effect they produce.

What is missing from the docs

The settings tables in api/settings.md list CIRCLE_COLOR, CIRCLE_STRONG, and INNER_CIRCLE_RADIUS_RATIO, but:

• There is no diagram or visual description showing which circles these settings affect.
• There is no practical example of making the zodiac ring border more prominent.
• The relationship between INNER_CIRCLE_RADIUS_RATIO and the width of the zodiac band is not explained.

What should be added

In the Custom Settings guide (guides/custom-settings.md)

Add a new section titled Styling the zodiac ring with:

1. A brief explanation of the chart structure (outer circle > zodiac band > planet ring > inner hollow).
2. A practical example showing how to make the ring border thicker and change its colour:

// Thicker, more visible zodiac ring border
const chart = new Chart('chart', 600, 600, {
  CIRCLE_COLOR: '#222',       // border/circle line colour
  CIRCLE_STRONG: 4,           // stroke width (default: 2)
})

3. An example showing how to make the zodiac band narrower or wider:

// Wider zodiac band (smaller ratio = bigger slice of the radius)
const chart = new Chart('chart', 600, 600, {
  INNER_CIRCLE_RADIUS_RATIO: 5,  // default: 8 — lower = wider band
})

// Narrower zodiac band
const chart = new Chart('chart', 600, 600, {
  INNER_CIRCLE_RADIUS_RATIO: 12,
})

In the Settings Reference (api/settings.md) - Circles & Lines section

Improve the description of INNER_CIRCLE_RADIUS_RATIO with an explicit note:

Controls the width of the zodiac sign band. The zodiac ring occupies radius/INNER_CIRCLE_RADIUS_RATIO pixels. Lower values produce a wider band; higher values produce a narrower band.

Relevant links

• Original question: I have a few questions. #87
• Settings source: project/src/settings.ts (CIRCLE_COLOR, CIRCLE_STRONG, INNER_CIRCLE_RADIUS_RATIO)
• Circle rendering: project/src/radix.ts drawCircles()