Chartist draws clean, responsive SVG charts and leaves the styling to you. No canvas, no dependencies, no theme engine. Just classes and custom properties.
// npm install chartist@next
import { lineChart } from 'chartist';
import 'chartist/styles.css';
lineChart('#chart', { series: [[1, 3, 2, 5]] });<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css">
<script type="module">
import { lineChart } from
'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';
lineChart('#chart', { series: [[1, 3, 2, 5]] });
</script>520k npm downloads a month13.4k GitHub starsused by 72.8k repositories
1 / 5Draw a line in one line
Give it a container and some numbers. Labels, grid, scaling and responsiveness are handled; the styling is yours.
import { lineChart } from 'chartist';
lineChart('#chart', {
labels: ['Mon', 'Tue', 'Wed'],
series: [[5, 9, 7], [3, 4, 6]]
});Same data shape, different function. Group series per label, or stack them to show totals.
import { barChart } from 'chartist';
barChart('#chart', {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [[5, 4, 3, 7], [3, 2, 9, 5]]
}, { stackBars: false });Slices are SVG paths with classes, so a donut sweep is just a stroke animation in CSS.
import { pieChart } from 'chartist';
pieChart('#chart', { series: [40, 30, 20, 10] }, {
donut: true,
donutWidth: 20
});Layer bars and lines in one chart, each with its own Y axis on the left or right.
import {
chart, cartesianAxes, stepAxis, autoScaleAxis, bar, line, axisLabels
} from 'chartist';
const days = ['Mon', 'Tue', 'Wed', 'Thu'];
chart('#chart', {
data: {
labels: days,
series: [
{ name: 'orders', data: [4, 6, 5, 8] },
{ name: 'growth', data: [20, 45, 38, 60] }
]
},
axes: cartesianAxes([
{ id: 'days', side: 'bottom', type: stepAxis(), ticks: days },
{ id: 'orders', side: 'left', type: autoScaleAxis() },
{ id: 'growth', side: 'right', type: autoScaleAxis() }
]),
layers: [
bar({ series: ['orders'], y: 'orders' }),
line({ series: ['growth'], y: 'growth', align: 'center' }),
axisLabels()
]
});Four chart shapes, one way of styling them: CSS. Keep scrolling for what makes it worth it.
// That's the tour.
// Keep scrolling for the details.The things people pick Chartist for, each with a tiny live demo.
Plain SVG with predictable classes. Pick a color:
--ct-series-aBy the window, or by the chart's own container (experimental), with the conditions you write in CSS.
responsive([
['(width < 600px)', small],
[container('(width < 400px)'), tiny]
])Bars and lines in one chart, each on its own Y axis.
Real SVG text labels. Render on the server for PDFs, email and images.
renderToString(toScene(config, size))You ship only what you import. A CDN module or npm, your pick.
chart)4.4 kBlineChart12.4 kBbarChartnot importedpieChartnot importedEvery element passes through an open pipeline. Change, replace or decorate any of it in a few lines, or pick a community plugin.
chart.on('compose', node =>
node.role === 'point'
? node.addClass('ct-hot')
: node
);Every chart flows through an open pipeline. Each phase has an event, and every single element passes through compose, where you can change, replace or decorate it. Plugins use the same events.
on('resolve')on('prepare')on('layout')on('compose')on('scene')on('render')on('mount')/** Lollipop bars: a dot on each bar; CSS makes the stick thin. */
export const lollipop = (): ChartPlugin => ({
name: 'lollipop',
install(chart) {
chart.on('compose', series => {
if (series.role !== 'series') {
return;
}
return decorateBars(series.addClass('ct-lollipops'), bar => {
const { x2, y2, style } = bar.attrs;
return node('circle', { cx: x2, cy: y2, r: 6, style }, 'ct-lollipop');
});
});
}
});/* style.css */
.ct-lollipops .ct-bar { stroke-width: 3px; }Community plugins add tooltips, legends, axis titles and zoom; plugins written for 1.x run in v2 through fromLegacyPlugin.
Every one is a plain SVG element that draws itself as it scrolls into view.
lineChartshowArea: truestackBars: truechart() + layersdonut + totalshowLine: falseEvery example in the docs is live. Change the data or the CSS and the chart updates as you type, right in the page. No sandbox site, no bundler.
import 'chartist/styles.css';
import { lineChart } from 'chartist';
lineChart(
'#chart',
{
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3]
]
},
{ fullWidth: true, chartPadding: { right: 30 } }
);Grab the corner and squeeze the chart. The labels rearrange themselves, driven by the same conditions you'd write in CSS.
520 pxbarChart('#chart', data, options, [
[container('(width >= 520px)'), {
axisX: { labelInterpolationFnc: month } // "Jan"
}],
[container('(360px <= width < 520px)'), {
axisX: { labelInterpolationFnc: initial } // "J"
}],
[container('(width < 360px)'), {
axisX: { labelInterpolationFnc: quarter } // "Q1"
}]
]);The same chart in a narrow and a wide card. Container queries pick the right options for each, no matter how wide the window is.
Lines draw, bars grow, donuts sweep, and a SMIL line morphs for fun. All of it calms down for people who prefer reduced motion.
.ct-line { animation: ct-draw }.ct-bar { animation: ct-draw }.ct-slice-donut { animation: ct-draw }<animate attributeName="d">An honest look next to Chart.js, ApexCharts and Highcharts. They're excellent libraries; pick the one that fits the job.
| Measured on October 14, 2026 | Chartist | Chart.js | ApexCharts | Highcharts |
|---|---|---|---|---|
| Bundle sizea line chart, minified and gzipped | 12.4 kBthis build | 49.4 kBv4.5.1 | 154.9 kBv7.6.1 | 104.7 kBv13.1.1 |
| Rendering | SVG | Canvas | SVG (canvas renderer opt-in) | SVG |
| Styling with CSScolors, lines and text from your stylesheet | Yes, classes and custom properties | No, options in JavaScript (canvas) | Mostly options in JavaScript | Yes, in styled mode |
| No build stepload it from a CDN in a plain HTML page | Yes, native ES module | Yes, script tag | Yes, script tag | Yes, script tag |
| Server-side rendering | Yes, to an SVG string, no DOM | Not built in | Yes, apexcharts/ssr | Yes, export server (headless browser) |
| TypeScript types | Yes, written in TypeScript | Yes, bundled | Yes, bundled | Yes, bundled |
| License for commercial use | Free (MIT or WTFPL) | Free (MIT) | Free under $2M revenue, paid above | Paid license |
| Chart types | Line, area, scatter, bar, pie, donut, gauge, composed | 8 types plus mixed charts | 25+ types | Dozens, plus Stock, Maps and Gantt |
| Tooltips and zoom | Through plugins | Tooltips built in, zoom plugin | Built in | Built in |
| Sources |
Small bundles, plain SVG, styling with the CSS you already write, ES modules straight from a CDN with no build step, and a permissive license.
More chart types out of the box, and built-in interactivity like tooltips, zoom and panning. If you need a full dashboard toolkit, they're great choices.
One line chart with the smallest setup each library documents (Chart.js tree-shaken registration, ApexCharts core plus the line type, Highcharts’ recommended import), bundled with esbuild (minified, ESM, browser) and gzipped (level 9). Versions: Chart.js 4.5.1, ApexCharts 7.6.1, Highcharts 13.1.1. Feature and license rows come from each library's own documentation, listed under Sources. Last run October 14, 2026. Spotted something out of date? Open an issue.
Framework-free, so it works everywhere. Community wrappers make it feel native in your stack.
92 contributors have shaped Chartist since 2014. Questions, ideas and pull requests are all welcome.
From the first commit in 2014 to v2: the creator, the maintainers and everyone who sent a pull request. Read the credits
One import, one function call, one chart. He's already celebrating.
npm install chartist@next