Chartist (or Chartist.js) is a free open-source JavaScript charting library hosted on GitHub. It provides some simple responsive SVG-based 2D charts: bar charts, cartesian charts (scatter points, lines and areas), pie and doughnut charts.

Local time in Zurich/Switzerland: Fri 3:36 PM (GMT+1:00)


Chartist.js is a FREE open-source project, started in 2004 by Gion Kunz. While its kernel is very small - just 10K - a lot of basic and advanced functionality is missing, but it is provided by extensibility plugins, most of them hosted on github as well, as free and open-source scripts.

How to Use

Featured Version: 0.11.0

You can download the latest version from GitHub or use a Chartist.js CDN.

Our templates provide you full JavaScript files for each chart, with local CSS, local JS code and remotely referenced CDN script files, including the plugins. Change these references if you want to use a different version or CDN.

Themes and Colors

Chartist has one built-in predefined default theme. and one built-in predefined sets of colors.

Builtin Color Palette: Default Colors from Chartist

Our Extended Features

  • emulated thin bar charts
  • emulated lollipop charts
  • emulated ring charts
  • emulated arc charts
  • hide chart's background/border/shadow
  • hide plot's background/border/shadow
  • single switch for graph only
  • single switch for whole plot's area
  • emulated chart title
  • emulated chart subtitle
  • switch for chart's title and subtitle
  • extended styled right legend
  • switch for chart's legend
  • hidden legend for single-series charts
  • toggle horizontal/vertical gridlines
  • switch for X/Y axis title
  • switch for X/Y axis labels
  • emulated slanded X/Y axis labels
  • switch for slanded X/Y axis labels
  • show/hide data labels
  • inside/outside data labels
  • percent/value data labels
  • switch for user interactivity
  • toggle animation
  • slower/faster animation
  • toggle styled tooltips
  • add source code error handling
  • shadowed chart title text
  • CSS chart background
  • CSS chart border
  • CSS chart shadow
  • plot gradient background
  • tooltip shadow
  • consistent tooltip content
  • series shadows
  • Google Fonts
  • CSS text transformations
  • scalable font size
  • custom credits link
  • area with/without line
  • switch to gray monochrome series
  • negative values with alternative color
  • edge data cases
  • color palette templates
  • custom/builtin color palette always in clear
  • builtin marker palette symbols always in clear
  • custom chart for no data
  • auto-adjusted chart padding

Our Extended Chart Types

All Chart Types

Top Real Time Web Analytics