Styling with CSS

Chartist has no theme option, and no color settings in JavaScript. Charts are SVG elements with predictable class names, and their look lives in CSS, next to the rest of your styles. When the brand color changes, you change one line in a stylesheet, not every chart’s options.

There are three ways in, from quick to complete: custom properties for the common things, plain selectors for everything else, and Sass if you want to build your own stylesheet.

Custom properties

The default stylesheet, chartist/styles.css, reads its values from custom properties and falls back to the classic Chartist look. Set one, and every chart in its scope follows. Press Edit and try other values:

#chart {
  --ct-series-a: #0544d3;
  --ct-series-b: #59922b;
  --ct-line-width: 2px;
  --ct-point-size: 8px;
  --ct-grid-dasharray: none;
}

A donut’s donutWidth option wins over --ct-donut-width. Without it, the chart lays the ring out for the width the stylesheet draws. A server render has no stylesheet to read and lays it out for 60 px, so set donutWidth there. More in Pie and donut charts.

They’re regular custom properties, so they cascade. Set them where they should apply:

/* The whole site */
:root {
  --ct-series-a: #c8102e;
}

/* Every chart in the sidebar */
.sidebar {
  --ct-line-width: 2px;
}

/* One chart */
#revenue {
  --ct-grid-dasharray: none;
}

One color per series

Each series is a group with a letter class: the first is ct-series-a, the second ct-series-b, up to ct-series-z, and the 27th starts again at ct-series-a. The letter class sets --ct-color, and the series’ lines, points, bars, areas and slices use it as their stroke or fill. There are 15 colors, so from the 16th series they repeat: ct-series-p gets the first series’ color and follows --ct-series-a, unless you set --ct-series-p. That gives you two levels to work at:

/* Recolor the second series everywhere */
:root {
  --ct-series-b: #f4c63d;
}

/* Or recolor one series in one chart */
#sales .ct-series-a {
  --ct-color: #0544d3;
}

Want a meaningful name instead of a letter? Give the series a className. It replaces the letter class, so the series has no default color and takes the one you give it:

import 'chartist/styles.css';
import { lineChart } from 'chartist';

lineChart('#chart', {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { className: 'revenue', data: [5, 7, 6, 9] },
    { className: 'costs', data: [3, 4, 4, 5] }
  ]
});

.revenue {
  --ct-color: #59922b;
}
.costs {
  --ct-color: #d70206;
}

Plain selectors for the rest

Custom properties cover the common cases. For anything else, write CSS against the classes Chartist draws:

Anything SVG and CSS can do works here: transitions, hover states, filters.

/* Square bar ends and a hover highlight */
.ct-bar {
  stroke-linecap: square;
  transition: opacity 0.2s;
}
.ct-series:hover .ct-bar {
  opacity: 0.6;
}

/* Only horizontal grid lines */
.ct-grid.ct-horizontal {
  display: none;
}

Colors for everyone

The classic colors are kept for compatibility, and some of their pairs are hard to tell apart for people with color vision deficiencies. Chartist ships an opt-in palette checked for that, with light and dark variants:

import 'chartist/styles.css';
import 'chartist/themes/accessible.css';

<body class="ct-theme-accessible">
  …
</body>

Add the class to the page or to one chart’s container. The palette follows the element’s color-scheme, so it switches with your dark mode as long as your dark theme declares color-scheme: dark.

Sass

If your build already uses Sass, configure the stylesheet at its source instead of overriding it. Every setting is a !default variable:

@use 'chartist/scss/index' with (
  $ct-series-names: (
    a,
    b,
    c
  ),
  $ct-series-colors: (
    #0544d3,
    #59922b,
    #f4c63d
  ),
  $ct-line-width: 2px,
  $ct-grid-dasharray: false
);

With fewer colors than names, the colors repeat in order, as in the default stylesheet. The custom properties still work on top of the compiled CSS. Set $ct-include-classes: false to emit nothing and use the ct-chart-* mixins in your own selectors.

In the API reference: classNames, to use class names of your own.

Next: make charts respond to the screen and their container, or animate them with CSS.