Theme
NM Charts v2.1
Zero-dependency Canvas charting library — lightweight & interactive
No dependencies
Canvas 2D
Dark mode
Touch ready
Responsive
23 chart types
NM Charts is a 100% free, zero-dependency Canvas charting library. Lightweight, fast, and beautiful out of the box. Use it in any project — no license fees, no strings attached.
CDN — Quick Install
<!-- Core (time series) — always latest --> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts.js"></script> <!-- Categories + Specialized -- always latest --> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts-categories.js"></script> <!-- Optional extras (playground, themes) --> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts-extras.js"></script>
Pinned version (recommended for production)
<!-- Replace @latest with a specific commit SHA or tag --> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@v2.2/demo/nmcharts.js"></script> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@v2.2/demo/nmcharts-categories.js"></script>
Tip: Use @latest during development and pin to a version tag (e.g. @v2.1) in production to avoid breaking changes.
Why NM Charts?
Built for developers who value simplicity, performance, and beautiful defaults
Getting Started
Add NM Charts to your project in seconds
<!-- 1. Add script tags --> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts.js"></script> <script src="https://cdn.jsdelivr.net/gh/malinconico/maquette@latest/demo/nmcharts-categories.js"></script> <!-- 2. Add a container --> <div id="myChart"></div> <!-- 3. Create your first chart --> <script> NMCharts.create('#myChart', { title: 'My First Chart', series: [{ name: 'Sales', type: 'area', color: '#4f46e5', data: [[1704067200000, 42], [1704153600000, 58], ...] }] }); </script>
Code Playground
Edit the config JSON and click Run to see your chart live
Performance
Designed to be tiny, fast, and self-contained
< 30 KB
Gzipped total size (core + categories)
17
Chart types included
60 FPS
Smooth Canvas 2D animations
0
External dependencies
Compatibility
Use NM Charts with your favorite framework
Vanilla JS
Compatible
Angular
Compatible
React
Coming Soon
Vue
Coming Soon
Svelte
Coming Soon
Live Chart Demos
Interactive examples for every chart type. Try zooming, panning, and toggling series.
Time Series
Example 1 — Mixed Area + Line
Example 2 — Line Chart
Example 3 — Minimal Area
Example 4 — Line + Threshold Corridor (Upper / Lower)
Category Charts
Example 5 — Bar Chart (Horizontal)
Example 6 — Column Chart (Vertical)
Example 7 — Bar Stacked
Example 8 — Lollipop
Example 9 — Line + Lollipop Combo
Composite
Example 10 — LineBar (Bar + Line Overlay)
Example 11 — Waterfall
Example 12 — Bullet
Example 13 — Timeline / Progress Bar
Specialized
Example 14 — Donut Chart
Example 15 — Gauge
Example 16 — Heatmap
Example 17 — Radar / Spider
Example 18 — Treemap
Example 19 — Funnel
Example 20 — Polar / Rose (Nightingale)
Example 21 — Scatter / Bubble
Example 22 — Sankey Diagram
Example 23 — Boxplot
Features
Smooth splinesMonotone cubic Bezier with adjustable tension (0-2)
Gradient fillVertical gradient from series color to transparent
Drag to zoomRectangle selection with animated transition
Shift + drag to panPan the viewport when zoomed
Scroll zoomMouse wheel zoom centered on cursor
NavigatorMinimap with draggable window + resize handles
Dark modeToggle via toolbar — CSS custom properties
Export PNGOne-click canvas download
FullscreenFullscreen API with auto-resize
Forecast zoneDashed line after configurable timestamp
Threshold bandsWarning / Critical colored zones
KeyboardArrows, +/-, Escape
Touch supportPinch to zoom, single-finger pan
Entry animationGrow-in ease-out cubic (800ms)
Shared tooltipCrosshair + hover dots + formatted values
Clickable legendToggle series visibility
Threshold corridorUpper & lower SLA bands with labels
ResponsiveAuto-resize on window change
Horizontal barsClassic horizontal bar charts with grouped series
Vertical columnsGrouped column charts with multi-series support
Stacked barsStacked horizontal bars for part-to-whole analysis
LollipopElegant dot-on-stem visualization for ranked data
Combo chartsMix line and lollipop series on shared axes
Donut / PieAnimated segments with center label and clickable legend
GaugeHalf-circle gauge with animated needle and color zones
HeatmapGrid heatmap with color gradient and hover tooltips
Radar / SpiderMulti-axis polygon chart for comparative analysis
TreemapHierarchical area chart for proportional data visualization
FunnelConversion pipeline with auto-calculated drop-off rates
Polar / RoseNightingale chart with radial gradient & spring animation
Scatter / BubbleXY plots with optional bubble sizing & multi-series
Sankey diagramFlow visualization with bezier links & auto-layout
BoxplotStatistical distribution with IQR, whiskers & outliers
Value labelsOptional value labels on bars and columns
LineBar compositeOverlay line series on top of bar columns with optional dual Y-axis
WaterfallCumulative progression through stages with connectors and total bar
BulletCompact actual vs target comparison with qualitative ranges
Timeline / ProgressHorizontal segmented bar showing proportional time or value breakdown
Quick start — copy & paste
<!-- 1. Add a container --> <div id="myChart"></div> <!-- 2. Load the libs --> <script src="nmcharts.js"></script> <script src="nmcharts-categories.js"></script> <!-- 3. Create a chart --> <script> // Time series NMCharts.create('#myChart', { title: 'Daily Metrics', series: [ { name: 'Revenue', color: '#4f46e5', data: [[Date.UTC(2025,0,1), 120], ...] } ] }); // Category chart NMCharts.bar('#barChart', { title: 'Top Teams', categories: ['Team A', 'Team B'], series: [{ name: 'Q1', color: '#4f46e5', data: [420, 380] }] }); // Donut NMCharts.donut('#donutChart', { title: 'Distribution', segments: [{ label: 'A', value: 40, color: '#4f46e5' }, ...] }); </script>
Changelog
v2.1 — Added 5 category chart types (bar, column, stacked, lollipop, combo), Angular integration guide
v2.0 — Specialized charts (donut, gauge, heatmap, radar), composite charts (lineBar, waterfall, bullet, timeline)
v1.0 — Core time series engine with area, line, threshold bands, zoom, pan, navigator, dark mode