Neo Charts
Zero dependencies, MIT licensed

Charts built from plain HTML. No SVG. No Canvas.

12
chart types
2
files to ship
0kb
runtime deps
~26kb
min. footprint

Because every bar, slice, and label is a real DOM node, you style Neo Charts with the CSS you already write. No SVG internals, no canvas redraws. Twelve chart types, two files, about 26 kB.

Open the editor Star on GitHub

See it running

Three live pages, all rendered by the same two files you would ship.

Security analytics

Dashboard

A 25-chart production dashboard: columns, bars, lines, gauges, heatmaps, treemaps, and stacked series composed into one cohesive layout, in both light and dark themes.

 View dashboard

Type gallery

Reference

Every chart type shown side by side in its chart, empty, and config states. The fastest way to find the one you need and copy its configuration.

 Browse types

Live editor

Playground

Change the type, data, and options with live controls, watch the chart update instantly, then copy the generated config straight into your project.

 Open editor

Two files, one call

No bundler, no framework, no install. Drop in the stylesheet and script, add a container, render.

  • Restyle any part with a CSS rule, no chart-specific config API
  • Works from a plain <script> tag or as a UMD module
  • Resizes with its container and respects reduced motion
<!-- 1. include the two files -->
<link rel="stylesheet" href="neo-charts.css">
<script src="neo-charts.js"></script>

<!-- 2. add a container -->
<div id="chart"></div>

<!-- 3. render -->
<script>
  neoCharts('#chart', {
    type: 'column',
    data: { series: [{
      title: 'Revenue',
      values: [12, 19, 8, 22],
      labels: ['Q1', 'Q2', 'Q3', 'Q4']
    }] }
  });
</script>

Style it like the rest of your page

The whole library is 12 kB of CSS you can read top to bottom, built on custom properties and predictable class names. Match your brand by overriding a variable, or reach any element with a normal selector.

  • Theme tokens like --nc-text and --nc-bg retint everything at once
  • Every part has a stable class: .nc-item, .nc-tooltip, .nc-label
  • Animate, round, or space bars with plain CSS, no re-render needed
/* Round every bar and give the tooltip your own look. */
.my-chart .nc-item {
  border-radius: 8px 8px 0 0;
}
.my-chart .nc-tooltip {
  --nc-tooltip-bg: #0d1117;
  border: 1px solid #00aeff;
  border-radius: 12px;
}

/* Or restyle the whole chart with two variables. */
.brand-dark .nc-chart {
  --nc-bg: #0d1117;
  --nc-text: #eef2f7;
}
AGAndy Gongea The maker

Hi, I'm Andy. I design and build things for the web.

I'm a designer who codes, and I can't help sweating the small details most people skip past. Neo Charts is what happens when I point that at a problem of my own: a charting library small enough to read in one sitting, built in the open, the way I'd want to use it.

Connect on LinkedIn
AIdesigndevxcyberspaceopen source
  1. Tenzai Now Leading the design effort
  2. Snyk Developer-first security
  3. DeepCode AI code review (acquired by Snyk)
Also building
ColorForklift Update Now Neo Charts