CSS Charts Built Using a Single DIV
Exploring unconventional UI rendering with modern CSS
SingleDivUI is a frontend engineering experiment that explores a different approach to chart rendering.
Using only a single HTML element and modern CSS, it renders line, bar, area, bubble, and scatter charts without SVG, Canvas, or image assets.
Star on GitHubSingle 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.
Interactive Customization
Customize colors, scales, labels, grid lines, points, bubbles, and more through configuration.
Zero Dependencies
Built without any external dependencies, frameworks, or other libraries.
Open Source Experiment
A creative engineering challenge published as an open-source project under the MIT License.
An experiment in
rethinking chart rendering
SingleDivUI started with a simple question:
Not a replacement
The goal was never to replace existing chart libraries. There are many excellent tools for that.
An opportunity to explore
It was an opportunity to explore browser rendering, CSS composition techniques, and unconventional approaches to UI engineering.
No, it isn't the easiest way to build charts.
That's precisely what makes it interesting.