Charts
6 chart types in pure inline SVG. No d3, no canvas library, no charting dependency — 8.14 kB for all of them.
Import
Charts live at their own subpath, with their own stylesheet, so an app that never draws a chart pays nothing for them.
import { LineChart } from '@the_viveksingh/vivek-ui/charts'
import '@the_viveksingh/vivek-ui/charts.css'Accessibility
Every chart renders a real <table> fallback, so a screen-reader user gets the actual numbers rather than "image". No series is encoded by colour alone: each carries a distinct dash pattern and marker shape, on a colourblind-safe palette with a lifted dark-mode ramp.
The set
A line chart with the region under each series filled. The y axis always includes zero, because an area measured from an arbitrary floor overstates its own magnitude.
Vertical or horizontal bars, grouped or stacked, in pure SVG. The value axis always includes zero - a bar chart that starts anywhere else misrepresents its own data - and negative bars extend the other side of the zero line.
A multi-series line chart in pure SVG - no d3, no canvas, nothing measured, so it renders complete on the server.
A pie or donut chart in pure SVG. Non-positive and non-finite slices are dropped - they have no meaning in a part-to-whole picture - and the remaining values are normalised, so slices always add up to the circle.
A circular determinate progress indicator: one SVG circle with a dash offset, which is why it needs no path maths, no measurement and no client JS.
A tiny, axis-free trend line meant to sit inside a sentence, a table cell or a stat card. Pure SVG, no measurement, no dependencies.