Chartist Studio

Build live line, bar and pie charts with the real Chartist 2.2 options, styled with CSS, drawn in SVG.

Chartist Studio — build live line, bar and pie charts with the real Chartist 2.2 options, styled with CSS, drawn in SVG.

How to use Chartist Studio

  1. Pick a chart type: line, bar or pie, or load a sample dataset from the repo examples
  2. Edit the labels and series data, one series per line, values comma-separated
  3. Toggle the real Chartist options for your chart type, like showArea or donut
  4. Watch the live SVG preview update and download it as an SVG file
  5. Copy the real Chartist v2 code and paste it into your project after npm install chartist

Features

  • Real Chartist 2.2.0 (MIT) chart types and options: LineChart, BarChart and PieChart
  • Live SVG preview implementing the documented options, including lineSmooth interpolation
  • Sample datasets taken from the repo's own examples: weekday traffic, sizes and market share
  • Copy-ready lineChart, barChart and pieChart code using the v2 functional API
  • Download the preview as an SVG file, with donut, start angle and stacked bar controls

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.