Charts and SVG theming

Navapatra draws charts on the server and returns plain SVG. There is no chart library to install and nothing to compute in the browser; you drop the SVG into the page and style it with CSS.

style: "north"

style: "south"

north, custom --kc-* values

These are real responses for the Pokhara sample, themed live by this page’s CSS.

Get a chart

POST/v1/charts/svg1 creditReference

Send either birth (computed for you) or kundali (a payload you already have from /v1/kundali or /v1/kundali/planets, of which only the lagna and graha longitudes are read). Exactly one of the two.

curl https://api.navapatra.com/v1/charts/svg \
  -H "Authorization: Bearer $NAVAPATRA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "birth": { "calendar": "BS", "date": "2050-05-12", "time": "14:35", "place": { "lat": 28.2096, "lng": 83.9856 } },
    "style": "north",
    "chart": "D1",
    "lang": "ne"
  }' \
  -o chart.svg

const res = await fetch('https://api.navapatra.com/v1/charts/svg', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.NAVAPATRA_API_KEY}`,
    'Content-Type': 'application/json',
    Accept: 'application/json', // JSON { svg, style, chart } instead of image/svg+xml
  },
  body: JSON.stringify({
    birth: { calendar: 'BS', date: '2050-05-12', time: '14:35', place: { lat: 28.2096, lng: 83.9856 } },
    style: 'north',
    chart: 'D1',
    lang: 'ne',
  }),
});
const { svg } = await res.json();
document.querySelector('#chart')!.innerHTML = svg;

import os
import requests

res = requests.post(
    "https://api.navapatra.com/v1/charts/svg",
    headers={"Authorization": f"Bearer {os.environ['NAVAPATRA_API_KEY']}"},
    json={
        "birth": {"calendar": "BS", "date": "2050-05-12", "time": "14:35",
                  "place": {"lat": 28.2096, "lng": 83.9856}},
        "style": "north",
        "chart": "D1",
        "lang": "ne",
    },
)
open("chart.svg", "w", encoding="utf-8").write(res.text)

<?php
require 'vendor/autoload.php';

$client = new GuzzleHttp\Client();
$res = $client->post('https://api.navapatra.com/v1/charts/svg', [
    'headers' => ['Authorization' => 'Bearer ' . getenv('NAVAPATRA_API_KEY')],
    'json' => [
        'birth' => [
            'calendar' => 'BS', 'date' => '2050-05-12', 'time' => '14:35',
            'place' => ['lat' => 28.2096, 'lng' => 83.9856],
        ],
        'style' => 'north',
        'chart' => 'D1',
        'lang' => 'ne',
    ],
]);
file_put_contents('chart.svg', (string) $res->getBody());

Field	Values	Default
`style`	`north` (diamond houses, fixed houses) or `south` (square, fixed signs)	`north`
`chart`	`D1` or `D9`	`D1`
`lang`, `numerals`	Labels and digits inside the chart	`en`, then by language
`options.showDegrees`	Adds each graha’s degree in its sign (D1 only)	`false`
`options.size`	Width and height in pixels, 100 to 2000	`400`
`options.ayanamsha`, `nodeType`, …	The usual chart options, for `birth` input

The response is image/svg+xml, or JSON { "svg", "style", "chart" } when you send Accept: application/json. To get charts alongside a kundali in one call, use include: ["svg"] (North) or ["svg.south"] (both) on /v1/kundali; those are D1 charts.

Charts made on the free plan or the Starter pack carry a small “Powered by Navapatra” line in the bottom corner. Growth, Scale and Volume packs, annual and enterprise plans do not. An org that holds Starter and a larger pack gets the larger pack’s charts.

Theme with CSS variables

Every colour and font in the SVG reads a CSS custom property, with a sensible fallback. Set them on the SVG or any ancestor:

Variable	Used for	Fallback
`--kc-bg`	Chart background	transparent
`--kc-house-bg`	House fill	transparent
`--kc-line`	House lines	grey
`--kc-text`	Graha labels	`currentColor`
`--kc-muted`	Sign numbers, degrees, watermark	grey
`--kc-accent`	Lagna label and marker	vermilion
`--kc-accent-soft`	Lagna house fill	translucent vermilion
`--kc-font`	Text	inherited
`--kc-font-mono`	Degrees	`ui-monospace`

/* Match the chart to your design tokens. */
.kc-root {
  --kc-line: var(--border-strong);
  --kc-text: var(--text);
  --kc-muted: var(--text-3);
  --kc-accent: var(--accent-text);
  --kc-accent-soft: var(--accent-soft);
  --kc-font: var(--font-sans);
  --kc-font-mono: var(--font-mono);
}

Because the variables resolve in your page, the same SVG follows your light and dark themes with no extra request.

Class names and data attributes

For anything variables cannot do, target the elements directly:

Selector	Element
`.kc-root`	The `<svg>`, also `.kc-north` or `.kc-south`
`.kc-house`, `.kc-house-1` to `.kc-house-12`	House polygons; `.kc-lagna-house` marks house 1
`.kc-lines`	The chart’s line drawing
`.kc-sign`	Sign numbers
`.kc-graha`, `.kc-graha-sun` … `.kc-graha-ketu`	Graha labels
`.kc-retro`	The retrograde marker
`.kc-degree`	Degrees, with `showDegrees`
`.kc-lagna`, `.kc-lagna-label`, `.kc-lagna-mark`	The lagna label and its marker
`.kc-watermark`	The “Powered by” line (free plan and Starter pack)

Houses, signs and grahas also carry data-house, data-sign and data-graha (and data-retrograde="true"), which makes it easy to add hover states or tooltips:

.kc-house:hover { fill: var(--accent-soft); }
.kc-graha[data-retrograde='true'] { font-style: italic; }

Accessibility

Each SVG has role="img" with a <title> (for example “Birth chart, North Indian style”) and a <desc> that lists the lagna and every graha’s house and sign, so screen readers get the whole chart as text. Labels use the lang you requested, and the <svg> carries a matching lang attribute.

Embedding safely

The SVG contains no scripts, links or external references. You can inline it with innerHTML or serve it as an image. Each chart’s internal ids are unique to its content, so several charts can sit on one page. For interactive charts with tooltips and keyboard navigation, use the <kundali-chart> widget.