Sizing charts

A chart fills its container. It measures the box, draws an SVG of that size, and draws again when the box changes. So sizing a chart means sizing its container, and you have three ways to do it: an aspect ratio class, fixed options, or your own CSS.

Aspect ratios

Images and videos on a responsive page keep their proportions as they scale: they’re 4:3 or 16:9, not 320 by 240 pixels. Charts should too. Add a ratio class to the container, and the chart is as wide as its parent and as tall as the ratio says:

<div id="chart" class="ct-perfect-fourth"></div>

No width or height in the options. Press Edit, then try another class in index.html:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <!-- Try ct-square, ct-perfect-fourth or ct-octave -->
    <div id="chart" class="ct-golden-section"></div>
  </body>
</html>

The classes come with chartist/styles.css and are named after musical intervals, from a square to four times as wide as tall:

Need another ratio? With Sass, the $ct-scales and $ct-scales-names settings define the list (keep them the same length); see Sass.

Fixed sizes

Sometimes a chart has a fixed spot: a 300 by 200 pixel card, a print layout. Set width and height in the options:

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

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[12, 9, 7, 8, 5]]
  },
  { width: 300, height: 200 }
);

A number is pixels. A string can be any CSS length, '20rem' or '50%': Chartist sets it on the SVG and measures what the browser makes of it. You can fix one side and leave the other to the container.

Your own CSS

The ratio classes are one way to give the container a size; anything that does is fine. A height in CSS works:

#chart {
  height: 240px;
}

So does CSS aspect-ratio, with one line you must not forget:

#chart {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

A container with no height of its own, like an empty div, gets a chart 150 pixels tall: the browser’s default height for an SVG. If a chart comes out that height whatever you do, the container’s height is the place to look.

More than one chart on a page

Every chart needs its own container. A selector string draws into the first element that matches it, so give each container an id:

<div id="visits" class="ct-perfect-fourth"></div>
<div id="revenue" class="ct-octave"></div>

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

lineChart('#visits', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [[12, 9, 7, 8, 5]]
});

barChart('#revenue', {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [[5, 4, 3, 7]]
});

Or pass the elements themselves, for example to draw one chart per card:

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

for (const element of document.querySelectorAll('.sparkline')) {
  lineChart(element, {
    series: [[3, 5, 2, 6, 4]]
  });
}

What happens on resize

Nothing you need to wire up. Chartist watches its container with a ResizeObserver and redraws when the size changes, whether the window was resized, a sidebar collapsed or the layout moved the chart. A chart with a fixed width and height keeps its size.

To change what the chart draws at a new size, not only how big it is, use responsive options. To stop watching, call detach() on the chart; see Updating charts.

In the API reference: width, height and chartPadding.

Next: style your charts with CSS.