Charts and graphs in pure, native CSS.
Write a list or a table, set a few custom properties, and get accessible, animated, responsive charts. No JavaScript, no canvas, no build step. Just one stylesheet you can drop into any project.
Link the hosted file or download vektor-1.0.0.css and serve it yourself. Every release keeps its version in the file name, so a link never changes under you. A CDN option is on its way.
Straight from csslib.github.io.
<link rel="stylesheet" href="https://csslib.github.io/vektor-1.0.0.css">A globally cached CDN link is being set up. Use the hosted or self-hosted option for now.
Coming soonDownload the file and keep it with your assets.
<link rel="stylesheet" href="/css/vektor-1.0.0.css">DownloadAdd vektor-1.0.0.css to the <head> of your page.
Wrap charts in an element with class="vk-scope" so they get fonts, colours and container queries.
Each item sets --val from 0 to 100. Labels come from data-label.
<link rel="stylesheet" href="https://csslib.github.io/vektor-1.0.0.css">
<div class="vk-scope" data-theme="light">
<ul class="vk-chart vk-bar vk-grid-y" style="--target: 80" data-target-label="Goal: 80%">
<li style="--val: 65" data-label="Q1" data-value="65%"></li>
<li style="--val: 88" data-label="Q2" data-value="88%"></li>
<li style="--val: 74" data-label="Q3" data-value="74%"></li>
</ul>
</div>Every chart below is drawn by Vektor.css alone. Change the theme, pick a brand colour or shuffle the data to watch @property animate the change. Open “View HTML” to copy any example.
A semantic <table> with a --target line, alert colouring and legend isolation using :has().
| Month | Cluster | Utilisation |
|---|---|---|
| Jan | US-East | 54% |
| Feb | US-East | 68% |
| Mar | EU-Central | 62% |
| Apr | EU-Central | 79% |
| May | US-East | 91% |
| Jun | US-East | 74% |
| Jul | EU-Central | 83% |
| Aug | EU-Central | 95% |
Points are placed with CSS sin() and cos().
Add .vk-grouped to switch from stacked to side by side.
Each cell sets only --val; intensity comes from color-mix(in oklch).
Five properties per row: --min, --q1, --med, --q3, --max.
A conic-gradient() with a mask cut-out, no SVG paths.
Labels stack above the bars automatically when the card gets narrow.
Values are plain numbers from 0 to 100 unless noted. Every chart also accepts --c on an item to set its colour.
| Class | Markup | Properties & attributes |
|---|---|---|
.vk-chart.vk-bar | <ul> of <li>, or a <table> with <tr> rows | --val, data-label, data-value, data-alert="high", data-series |
.vk-bar-multi | Each <li> holds .vk-seg segments | --val per segment; add .vk-grouped for side-by-side bars |
.vk-chart.vk-hbar | <li> with .vk-hbar-label, .vk-hbar-track > .vk-hbar-fill, .vk-hbar-val | --val |
.vk-chart.vk-radar | <li> with .vk-radar-stem and .vk-radar-point | --total on the list; --i (0-based index), --val, data-label per item |
.vk-chart.vk-heatmap | Grid of .vk-heatmap-col-header, .vk-heatmap-label and .vk-heatmap-cell | --cols on the grid; --val per cell |
.vk-chart.vk-range | .vk-range-row containing .vk-range-track with whisker, box and median | --min, --q1, --med, --q3, --max |
.vk-donut | Element with an optional .vk-donut-center | --s1, --s2, --s3 (segment percentages), --_size, --_thickness |
.vk-gauge | Element with an optional .vk-gauge-readout | --val, --c |
.vk-scopevk-card container query..vk-grid-y / .vk-grid-x--target + data-target-label.vk-values-visible.vk-legend, .vk-legend-item[data-series]:has()..vk-sr-only--vk-seed--vk-c-1 … --vk-c-5, --vk-c-danger--vk-bg, --vk-surface, --vk-text, --vk-text-muteddata-theme="light" to any ancestor.--vk-radius, --vk-gap, --vk-chart-height--vk-duration, --vk-ease--vk-font-sans, --vk-font-mono:root {
--vk-seed: #e63e14;
--vk-c-2: #0ea5e9;
--vk-radius: 10px;
--vk-chart-height: 300px;
}@propertyTyped custom properties let --val transition smoothly whenever your data changes.
sin() · cos()Radar points sit on true polar coordinates calculated by the browser.
color-mix(in oklch)Heatmaps, borders and hover states are derived from a single brand colour.
:has()Hover a legend item and every other series fades, with no event listeners.
@containerCharts adapt to the width of their card, not the browser window.
@layerEverything lives in vektor.* cascade layers, so your own styles always win.
Vektor.css relies on @property, trigonometric functions, color-mix(), :has(), container queries and cascade layers. Charts are plain lists and tables, so content stays readable anywhere and to assistive technology.
Vektor.css is free and MIT licensed. Use it in personal and commercial projects.