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

Zero Dependencies No jQuery, no D3, no React. Just drop the script tag and go. Under 30 KB gzipped for the full library.
Canvas 2D Rendering Hardware-accelerated Canvas 2D for silky 60fps animations and smooth interactions even with large datasets.
17 Chart Types From time series to radar, waterfall to bullet charts. Everything you need in one lightweight package.
Beautiful by Default Gradients, shadows, smooth animations, and a modern color palette. No CSS tweaking needed.
Framework Agnostic Works with vanilla JS, Angular, React, Vue, or any framework. Just pass a DOM element or CSS selector.
100% Free & Open No license fees, no watermarks, no strings attached. Use it in personal or commercial projects.

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