📊 Glance-Charts — Ultra-Lightweight, Zero-Dependency Charting Library

#frontend #javascript #performance #tools

When it comes to adding charts to a web project, we are often forced to choose between heavy, feature-packed libraries (like Chart.js or D3.js) or lightweight ones that lack essential chart types.

Meet Glance-Charts: an ultra-lightweight (under 8KB gzipped), high-performance, and accessible data visualization library built with pure vanilla JavaScript and CSS.

⚡ The Stats at a Glance

Size: < 8KB gzipped | Dependencies: Zero | Chart Types: 29+ | Rendering: SVG & Canvas

Feature	📊 Glance-Charts	📈 Chart.js / D3
Bundle Size	< 8KB	~120KB - 250KB+
Dependencies	None (Pure JS/CSS)	Multiple / Heavy packages
Rendering Engine	Dual Engine (SVG / Canvas fallback)	Canvas or SVG only
Chart Types	29 Types	Varies
Custom Styling	Simple Vanilla CSS	Complex Canvas Configs

🚀 Key Features

Zero Dependencies: Built from scratch using pure, modern Vanilla JavaScript and native CSS.
Dual Engine Architecture: Automatically selects crisp, scaleable SVG for graphics and falls back to Canvas for high-frequency datasets (>2000 points) to maintain solid 60FPS performance.
Beautiful by Default: Comes with modern Outfit typography, glassmorphism tooltips, responsive resizing, and smooth micro-animations.
Accessible & SEO Friendly: Uses semantic SVG tags and labels so screen-readers can read them and search engines can index them.
Universal Export: Built-in menu allowing users to export charts as vector SVG or raw CSV files with a single click.

📈 Supported Chart Types (29+)

Glance-Charts supports a wide variety of visualizations out of the box:

📊 Standard Cartesian: Line, Bar, Horizontal Bar, Area, Pie, Donut/Doughnut.
🧪 Advanced & Statistical: Scatter, Bubble, Radar, Polar Area, Box Plot, Violin Plot, Candlestick (for financial data).
🥞 Stacked Layouts: Stacked Bar, Stacked Horizontal Bar, Stacked Area.
🌀 Specialized Diagrams: Heatmaps, Treemaps, Gauges/Speedometers, Funnels, Waterfall, Sunburst, Sankey Diagrams, Word Clouds, and Vector Maps.

🛠️ Quick Start

You can install it via NPM:

npm install glance-charts

Or include the CDN links directly in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glance-charts/glance-charts.css">
<script src="https://cdn.jsdelivr.net/npm/glance-charts/glance-charts.js"></script>

Initialize your first chart with a simple functional call:

Glance('#my-chart-container', {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
        datasets: [{
            label: 'Sales',
            values: [10, 25, 45, 30]
        }]
    }
});

⭐ Support & Open Source

Glance-Charts is open-source and released under the MIT License. Try it out, build something cool, and let us know your thoughts!

👉 Check out the repo, try the live demo, and leave a star!

🔗 GitHub Repository: loftytechlabs/Glance-Charts

DEV Community