Chartist
A small JavaScript library that draws simple, responsive SVG charts styled with CSS.
- Stars
- 13.5k
- Forks
- 2.5k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 5 days ago
- Type
- Library
What it is
Chartist is a JavaScript library for drawing charts on web pages. It renders charts as SVG, so they scale to fit their container, and you style them with ordinary CSS. It is aimed at people who want a lightweight, readable charting option without a large framework.
- Show a weekly line chart of sales or traffic on a web page
- Combine bars and lines in a single chart across multiple axes
- Render a chart on a server as SVG for inclusion in a PDF or image
- Build a responsive chart whose options change with media queries
Great for
- Web developers adding simple line, bar or pie charts to a site
- Teams that want to style charts with plain CSS
- Projects that prefer no build step, using a native ES module from a CDN
- Developers who want charts rendered on a server as SVG for PDFs or email
Not ideal for
- People who need many advanced chart types or built-in interactivity, since the README focuses on core simple charts
- Users of Chartist 0.x or 1.x wrappers who need a fully supported path, since the README notes some wrappers still target older versions
- Beginners with no web development experience, since the examples assume HTML and JavaScript familiarity
How to get it
- 1
Install with a package manager
Install from npm
npm install chartist - 2
Run it
- Install the package with npm install chartist.
- Add a container element with an id and the class ct-golden-section.
- Import lineChart and the stylesheet, then call lineChart with a selector and your data series.
- Open the page in a browser to see the chart.
- 3
Get the most out of it
- Use the responsive options (media queries or container-based) to adapt charts to different screen sizes.
- Customize colors, lines and labels through the CSS custom properties described in the README.
- Use the plugin system and the community plugins listed on the docs site to extend charts.
- Use the server rendering approach to produce SVG output for PDFs, email or images.
Downloads
Strengths
- Charts are plain SVG styled with CSS, which is easy to customize
- Written in TypeScript with no dependencies, and you ship only what you import
- Works without a bundler as a native ES module
Trade-offs
- The README says 1.x classes are deprecated and will be removed in 3.0, so migration may be needed for older code
- Some community wrappers were built for older Chartist versions and may need workarounds
- The README does not list every chart type or feature, so check the docs for specifics
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| chartist (this) | 13.5k | Library | beginner | 5 days ago | Web developers adding simple line, bar or pie charts to a site |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| recharts | 27.7k | Library | beginner | 4 days ago | React developers who need standard charts such as line, bar or similar graphs in a web app |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| feather | 26k | Library | beginner | 1.7 years ago | Web developers who want a clean set of line icons without designing their own |
| rough | 21.3k | Library | intermediate | 2.3 years ago | Web developers who want a casual, hand-drawn look for diagrams or illustrations |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.