svg-chartinglisted

# SVG charting without a library Published artifacts block every external host, so D3, Recharts, Chart.js and Plotly are simply not available. Inlining a full library costs hundreds of KB to use a fraction of it. The good news: **the parts of a charting library you actually need are small.** Scales, ticks, paths, and stacking are a few dozen lines each. This skill ships them, tested, in `scripts/chartkit.js` (~8KB, no dependencies, works as ESM, CJS, or a plain `<script>`). ```bash node scripts/chartkit.test.js # 47 assertions ``` --- ## The five things you need ### 1. Scales — map data to pixels ```js const x = chartkit.scaleBand(months, [padLeft, width - padRight], 0.2); const y = chartkit.scaleLinear([0, maxValue], [height - padBottom, padTop]); ``` **Note the inverted y range.** SVG's origin is top-left and y grows downward, so a value scale runs from `height` down to `0`. Getting this backwards produces an upside-down chart that otherwise looks plausible — check it early. `scaleLinear` pins to the range midpoint on a zero-width domain rather than dividing by zero, so a flat series renders instead of vanishing into `NaN`. ### 2. Nice ticks — round numbers, not raw divisions ```js const ticks = chartkit.niceTicks(0, 4_820_000, 5); const [lo, hi] = chartkit.niceDomain(0, 4_820_000, 5); // expand to tick boundaries ``` Steps snap to 1, 2, **2.5**, 5, or 10 × a power of ten. The 2.5 is deliberate: it produces 250 / 500 / 750 on money axes, which reads far bet