chartist-js / chartist

# Chartist
[![npm (next)][npm]][npm-url]
[![Downloads][downloads]][downloads-url]
[![Build status][build]][build-url]
[npm]: https://img.shields.io/npm/v/chartist/next.svg
[npm-url]: https://www.npmjs.com/package/chartist
[downloads]: https://img.shields.io/npm/dm/chartist.svg
[downloads-url]: https://www.npmjs.com/package/chartist
[build]: https://img.shields.io/github/actions/workflow/status/chartist-js/chartist/ci.yml?branch=main
[build-url]: https://github.com/chartist-js/chartist/actions
Simple, responsive charts, drawn in SVG and styled with CSS. Tiny, typed, and happy without a build step.
**chartist.dev** · Getting started · API · Examples · Plugins · Changelog
> **Coming from Chartist 1?** Your code keeps working. Coming from 1.x shows what's new, and the 1.x docs are at chartist.dev/v1/.
## Install
 [code] 
 [code] 
 [code] 
No bundler? Chartist is a native ES module:
 [code] 
## Why Chartist
- **Style it with CSS.** Plain SVG with predictable classes and custom properties for colors, lines and labels. No theme engine.
- **Responsive, two ways.** Options that change with media queries, or with the chart's own container.
- **Composed charts.** Bars and lines in one chart, on as many axes as you need.
- **Renders anywhere SVG does.** Render on a server, with real SVG text labels, for PDFs, email and images.
- **Extend everything.** Every element passes through an open pipeline you can hook into, and the community's plugins keep working.
- **Tiny and typed.** Written in TypeScript, no dependencies, and you ship only what you import.
## Coming from 1.x
Your 1.x code keeps working: the chart classes draw what they drew before. 1.x events and plugins work with `chartist/compat`. The classes are deprecated, and 3.0 removes them from `chartist`. Coming from 1.x explains what changed and how to move to the functions.
## Community wrappers
Chartist needs no wrapper: a chart is a container and a function call, and Charts in frameworks has recipes for React, Vue, Angular and Svelte, with server rendering. If you'd rather use a component, the community wraps Chartist for these stacks. Thank you to everyone who built them!
| Stack | Wrapper | Built for |
| ------------- | ----------------------------------------------------------------------------------------------- | ------------ |
| React | react-chartist | Chartist 1.x |
| Angular | ng-chartist | Chartist 1.x |
| Vue | vue-chartist | Chartist 0.x |
| Node.js | node-chartist | Chartist 0.x |
| Ember | ember-cli-chartist | Chartist 0.x |
| Java (JSF) | ChartistJSF | Chartist 0.x |
| Vue 2 | v-chartist | Chartist 0.x |
| R | chartist (htmlwidget) | Chartist 0.x |
| Meteor | mfpierre:chartist-js | Chartist 0.x |
| WordPress | TablePress Extension: Chartist | Chartist 0.x |
| Blazor | UnlockedData.Chartist.Blazor | Chartist 0.x |
| Angular | ngx-chartist | Chartist 0.x |
| Ruby on Rails | chartist-rails | Chartist 0.x |
Wrappers built for 1.x run on v2: see Community wrappers for the npm `overrides` en