CSS Charts Built Using aSingle <div>
SingleDivUI is a frontend engineering experiment exploring how far modern CSS can go. It renders Line, Bar, Area, Bubble, and Scatter charts from a single HTML element without SVG, Canvas, or image assets.
Curious how it works? Inspect the chart.
Single DIV architecture
Every chart is rendered from a single root HTML element, without additional DOM structures.
Pure CSS rendering
No SVG, Canvas, or image-based rendering. Visuals are composed entirely with modern CSS.
Five chart types
Line, bar, area, bubble, and scatter charts with a consistent configuration model.
Configurable rendering
Customize colors, scales, labels, grid lines, points, bubbles, and more through configuration.
Zero runtime dependencies
Built without external runtime dependencies, frameworks, or charting libraries.
Open source experiment
An open-source frontend experiment exploring unconventional approaches to chart rendering.
How does a single <div> draw a chart?
Curious how this is actually built? Step through it below.
Start with two lines
Every chart starts the same way — a bottom axis and a left axis. Nothing else on the box changes from here on.
.chart {
border-left: 2px solid #6B7280;
border-bottom: 2px solid #6B7280;
}Exploring how far a single <div> can go
SingleDivUI started with a simple question:
"Can a complete charting system be built using only a single HTML element and modern CSS?"
Not a replacement
SingleDivUI isn't intended to replace established charting libraries. It's an experiment in exploring what modern CSS and the browser rendering model can do.
A frontend engineering experiment
It explores browser rendering, CSS composition techniques, and unconventional approaches to UI engineering.