How to use Chartist: install, draw charts and style them with CSS

Install Chartist with npm

Chartist is published on npm. If your project uses a package manager, install it from your project folder with the command below. The README lists no prerequisites, but its examples assume you are comfortable with HTML and JavaScript.

Draw your first chart

Chartist draws a chart into a container element. Give a div an id, then pass that id to a chart function along with your data. The example uses lineChart, which takes labels and a list of series, where each series is an array of numbers.

Add the stylesheet and a container with the class ct-golden-section, which gives the chart its default proportions.

• Pass the container selector, such as '#chart', as the first argument.
• Put your x-axis labels in labels and one array per line in series.
• Import the stylesheet alongside the function so the chart is drawn with its default styles.

Use Chartist without a build step

If you have no bundler, Chartist works as a native ES module loaded from a CDN. Link the stylesheet, add the container, and import the function in a script tag with type set to module.

This route suits small pages where you want a chart without setting up a build tool.

Style charts with CSS

Chartist renders plain SVG with predictable class names, and it exposes custom properties for colors, lines and labels. You change the look with your own stylesheet rather than a theme engine.

Because the output is ordinary SVG and CSS, the same styling rules you already use for your page apply to the chart.

• Target the SVG classes Chartist adds to change colors, line thickness and label appearance.
• Set the custom properties for colors and lines to keep a consistent palette across charts.
• Use the container class to control the chart's shape and size.

Make charts responsive

Because charts are SVG, they scale to fit their container. Chartist also lets you change options at different screen sizes in two ways: with media queries, or based on the chart's own container.

Use media queries when the whole page layout changes width. Use container-based options when the same chart sits in different sized slots.

Render charts on the server

Chartist can render on a server with real SVG text labels. The README names PDFs, email and images as uses for this, since the output does not depend on a browser running client-side scripts.

The docs site has framework recipes, including server rendering for React, Vue, Angular and Svelte.