Examples

Lightweight SVG+HTML hybrid charts. Zero dependencies, typed. Line, bar & pie.

~4.4 KB brotli ~5.1 KB gzip JS ~3.7 KB + CSS ~0.7 KB brotli ~12 KB + ~2.6 KB min

CDN

CSS

Line Chart

Basic Line

NanoLineChart('container', {
  data: [[5, 12, 8, 20, 15, 25, 18]],
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  xLabel: 'Day',
  yLabel: 'Sales'
});

Smooth + Area Fill

NanoLineChart('container', {
  data: [
    [3, 7, 12, 9, 15, 20, 17],
    [10, 5, 8, 14, 11, 9, 22]
  ],
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  xLabel: 'Month',
  yLabel: 'Revenue (k)',
  smooth: true,
  areaFill: true,
  areaOpacity: 0.15
});

Dashed Grid + Custom Colors

NanoLineChart('container', {
  data: [
    [22, 28, 35, 30, 42, 38, 45],
    [15, 20, 18, 25, 22, 30, 28],
    [8, 10, 14, 12, 18, 15, 20]
  ],
  labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
  colors: ['#6366f1', '#ec4899', '#14b8a6'],
  gridDashed: true,
  strokeWidth: 3
});

Minimal (No Grid/Ticks)

NanoLineChart('container', {
  data: [[10, 25, 18, 30, 22, 40, 35, 50, 42]],
  labels: ['', '', '', '', '', '', '', '', ''],
  showGrid: false,
  showTicks: false,
  smooth: true,
  areaFill: true,
  areaOpacity: 0.2,
  colors: ['#10b981']
});

Thick Stroke + Custom Size

NanoLineChart('container', {
  data: [[120, 180, 150, 220, 190, 260]],
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  xLabel: 'Month',
  yLabel: 'Users',
  strokeWidth: 4,
  height: 250,
  colors: ['#f59e0b']
});

Area Comparison (3 Series)

NanoLineChart('container', {
  data: [
    [50, 60, 55, 70, 65, 80],
    [30, 40, 35, 50, 45, 55],
    [10, 15, 20, 25, 30, 35]
  ],
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  xLabel: 'Month',
  yLabel: 'Traffic (k)',
  smooth: true,
  areaFill: true,
  areaOpacity: 0.12,
  colors: ['#3b82f6', '#ef4444', '#22c55e']
});

Watermark — Text

NanoLineChart('container', {
  data: [[8, 15, 12, 22, 18, 28, 24]],
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  xLabel: 'Day',
  yLabel: 'Visitors',
  smooth: true,
  areaFill: true,
  areaOpacity: 0.1,
  colors: ['#6366f1']
});

Watermark — Image Logo

NanoLineChart('container', {
  data: [[12, 19, 15, 25, 22, 30, 28]],
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  xLabel: 'Day',
  yLabel: 'Requests',
  smooth: true,
  colors: ['#ef4444']
});

Bar Chart

Basic Bar

NanoBarChart('container', {
  data: [[40, 65, 30, 80, 55]],
  labels: ['Chrome', 'Firefox', 'Safari', 'Edge', 'Other'],
  xLabel: 'Browser',
  yLabel: 'Users'
});

Grouped (Year-over-Year)

NanoBarChart('container', {
  data: [
    [20, 35, 45, 30],
    [30, 25, 40, 50]
  ],
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  xLabel: 'Quarter',
  yLabel: 'Revenue (k)',
  colors: ['#215CAF', '#00C9A7']
});

Stacked Bar

NanoBarChart('container', {
  data: [
    [12, 18, 22, 15, 20],
    [8, 12, 10, 18, 14],
    [5, 8, 6, 10, 9]
  ],
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  xLabel: 'Day',
  yLabel: 'Tasks',
  stacked: true,
  colors: ['#215CAF', '#007894', '#00C9A7']
});

Horizontal Bar

NanoBarChart('container', {
  data: [[85, 72, 60, 45, 30]],
  labels: ['JavaScript', 'Python', 'TypeScript', 'Rust', 'Go'],
  xLabel: 'Popularity',
  horizontal: true,
  colors: ['#F69C3D']
});

Negative Values (P&L)

NanoBarChart('container', {
  data: [[15, -8, 22, -12, 30, -5]],
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  xLabel: 'Month',
  yLabel: 'Profit (k)',
  colors: ['#6366f1']
});

Custom Gap + Dashed Grid

NanoBarChart('container', {
  data: [
    [45, 60, 35, 80],
    [30, 45, 55, 40]
  ],
  labels: ['Web', 'iOS', 'Android', 'Desktop'],
  xLabel: 'Platform',
  yLabel: 'Sessions (k)',
  barGap: 0.4,
  gridDashed: true,
  colors: ['#8b5cf6', '#f43f5e']
});

Pie & Donut Chart

Basic Pie

NanoPieChart('container', {
  data: [40, 25, 20, 15],
  labels: ['Desktop', 'Mobile', 'Tablet', 'Other']
});

Donut

NanoPieChart('container', {
  data: [35, 30, 20, 10, 5],
  labels: ['React', 'Vue', 'Angular', 'Svelte', 'Other'],
  donut: true,
  donutWidth: 50
});

Thin Donut + Custom Colors

NanoPieChart('container', {
  data: [50, 30, 20],
  labels: ['Completed', 'In Progress', 'Pending'],
  donut: true,
  donutWidth: 25,
  colors: ['#22c55e', '#f59e0b', '#ef4444']
});

Many Slices (Budget)

NanoPieChart('container', {
  data: [30, 20, 15, 12, 10, 8, 5],
  labels: ['Rent', 'Food', 'Transport', 'Utilities',
    'Health', 'Savings', 'Other'],
  colors: ['#3b82f6', '#ef4444', '#f59e0b',
    '#8b5cf6', '#ec4899', '#10b981', '#6b7280']
});

No Labels (Hover Only)

NanoPieChart('container', {
  data: [60, 25, 15],
  labels: ['Organic', 'Paid', 'Referral'],
  showLabels: false,
  colors: ['#0ea5e9', '#f97316', '#a855f7']
});

Wide Donut + Custom Size

NanoPieChart('container', {
  data: [70, 30],
  labels: ['Used', 'Free'],
  donut: true,
  donutWidth: 80,
  width: 300,
  height: 300,
  colors: ['#3b82f6', '#e5e7eb']
});

Documentation

Installation

npm / yarn / pnpm

npm install @anvme/nanocharts

import { NanoLineChart, NanoBarChart, NanoPieChart } from '@anvme/nanocharts';
import '@anvme/nanocharts/style.css';

CDN (no build step)

<link href="https://cdn.jsdelivr.net/npm/@anvme/nanocharts@1.0.3/dist/style.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@anvme/nanocharts@1.0.3/dist/nanocharts.min.global.js"></script>

API Reference

`NanoLineChart(containerId, config)`

Option	Type	Default	Description
`data`	`number[][]`	—	Array of series. Each inner array is one line.
`labels`	`string[]`	—	X-axis labels. Must match series length.
`xLabel`	`string`	`''`	X-axis title.
`yLabel`	`string`	`''`	Y-axis title.
`colors`	`string[]`	brand palette	Color per series.
`width`	`number`	container width	Chart width in px.
`height`	`number`	`350`	Chart height in px.
`smooth`	`boolean`	`false`	Catmull-Rom spline smoothing.
`areaFill`	`boolean`	`false`	Semi-transparent fill under lines.
`areaOpacity`	`number`	`0.1`	Area fill opacity (0–1).
`strokeWidth`	`number`	`2.5`	Line stroke width.
`showTicks`	`boolean`	`true`	Show X/Y tick labels.
`showGrid`	`boolean`	`true`	Show grid lines.
`gridDashed`	`boolean`	`false`	Dashed grid lines.
`hover`	`boolean`	`true`	Enable hover tooltip + indicator.

`NanoBarChart(containerId, config)`

Option	Type	Default	Description
`data`	`number[][]`	—	Array of series. Each inner array is one series.
`labels`	`string[]`	—	Category labels.
`xLabel`	`string`	`''`	X-axis title.
`yLabel`	`string`	`''`	Y-axis title.
`colors`	`string[]`	brand palette	Color per series.
`width`	`number`	container width	Chart width in px.
`height`	`number`	`350`	Chart height in px.
`stacked`	`boolean`	`false`	Stack series instead of grouping.
`horizontal`	`boolean`	`false`	Horizontal bars (categories on Y).
`barGap`	`number`	`0.2`	Gap between groups (0–1 fraction).
`showTicks`	`boolean`	`true`	Show tick labels.
`showGrid`	`boolean`	`true`	Show grid lines.
`gridDashed`	`boolean`	`false`	Dashed grid lines.
`hover`	`boolean`	`true`	Enable hover tooltip + indicator.

`NanoPieChart(containerId, config)`

Option	Type	Default	Description
`data`	`number[]`	—	One numeric value per slice.
`labels`	`string[]`	—	Label per slice.
`colors`	`string[]`	brand palette	Color per slice.
`width`	`number`	container width	Chart width in px.
`height`	`number`	= width	Chart height in px (square by default).
`donut`	`boolean`	`false`	Donut mode (hollow center).
`donutWidth`	`number`	`60`	Donut ring thickness in px.
`showLabels`	`boolean`	`true`	Show labels outside slices.
`hover`	`boolean`	`true`	Enable hover tooltip.

Theming & Dark Mode

Charts auto-adapt to dark mode via prefers-color-scheme. You can also force dark mode with any of these:

<!-- Bootstrap 5.3 -->
<html data-bs-theme="dark">

<!-- Tailwind -->
<html class="dark">

<!-- Standalone -->
<div class="chart-dark">
  <div id="chart"></div>
</div>

CSS Custom Properties

Override on the .chart SVG element or a parent wrapper:

Property	Light default	Description
`--chart-bg`	`#fff`	Chart background
`--chart-grid`	`#e0e0e0`	Grid line color
`--chart-text`	`#666`	Tick label color
`--chart-title`	`#333`	Axis title color
`--chart-zero-line`	`#999`	Zero-axis line color
`--chart-indicator-stroke`	`#fff`	Hover indicator stroke
`--chart-indicator-bar-fill`	`rgba(255,255,255,0.3)`	Bar hover fill
`--chart-indicator-bar-stroke`	`#333`	Bar hover stroke

Watermark / Copyright

Add a text or image watermark with pure CSS — no library changes needed.

Text watermark

<div id="chart" class="chart-watermark-text" data-watermark="Your Brand"></div>

Image watermark

Wrap the chart container so --watermark survives the library's inline style reset:

<div class="chart-watermark-img" style="--watermark: url('logo.png'); position: relative">
  <div id="chart"></div>
</div>

See the CSS tab on the watermark examples above for the full ::after styles.

Browser Support

All modern browsers: Chrome, Firefox, Safari, Edge. No IE11. Uses SVGElement, Int16Array, Float64Array, requestAnimationFrame, CSS custom properties.