The Challenge

Some projects start with a requirement.

This one started with a constraint.

SingleDivUI explores a simple but unconventional idea: building charts using only a single HTML element and modern CSS.

The goal was never to replace existing chart libraries. Rather, it was an opportunity to understand browser rendering capabilities at a deeper level, push CSS beyond its conventional use cases, and uncover new possibilities in UI engineering.

The result is a collection of chart components rendered entirely through CSS and a single root DIV element.

Design Constraints

To make the challenge meaningful, the project was built around a set of deliberate constraints:

• A single root DIV element serves as the foundation for every chart.
• No SVG, Canvas, or image-based rendering is used.
• Charts remain responsive across different viewport sizes.
• Visual customization is supported through configuration options, similar to traditional charting solutions.
• Rendering is designed to remain visually consistent across supported browsers.

These constraints transformed a simple charting exercise into a study of creative problem-solving, unconventional rendering techniques, and the practical capabilities of modern CSS.

Techniques Explored

Building charts with a single HTML element required combining several CSS techniques in unconventional ways:

• CSS Variables
• Linear, Radial, and Conic Gradients
• Multiple Background Layers
• Pseudo Elements
• CSS Calculations
• Transforms

Many of these techniques are commonly used for styling interfaces. In SingleDivUI, they are repurposed as building blocks for rendering chart elements, data points, grid lines, labels, and visual effects.

The Result

The outcome is more than a collection of charts.

SingleDivUI demonstrates how a set of deliberate constraints, combined with modern CSS capabilities, can produce a flexible charting system.

The project currently supports:

• Line Charts
• Bar Charts
• Area Charts
• Bubble Charts
• Scatter Charts

Each visualization is built upon the same underlying philosophy: using CSS not only as a styling tool, but as a rendering medium.

Interactive Demos

The best way to understand SingleDivUI is to see it in action.

The demo collection showcases different chart types, rendering techniques, and customization possibilities through a series of interactive examples.

Whether you're evaluating the library or simply curious about the implementation techniques, the demos provide a practical way to explore the project.

Explore the demos: https://singledivui.com/demos

Quick Start

Creating a chart requires only a few lines of code.

Installation

npm install singledivui

Basic Example

import { Chart } from 'singledivui';
import 'singledivui/dist/singledivui.min.css';

new Chart('#chart', {
    type: 'line',

    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        series: {
            points: [10, 20, 15]
        }
    }
});

Despite the rendering constraints described earlier, the API is intentionally designed to remain simple and familiar to developers who have worked with traditional charting libraries.

For additional examples, customization options, and API documentation, visit the resources below.

Learn More

• Interactive Demos
• Documentation
• API Reference
• StackBlitz Example
• CodePen Example

License

SingleDivUI is released under the MIT License.

See the LICENSE file for details.