Responsive SVG Charts with Vanilla JavaScript – Chartist

Chartist is a JavaScript charting library that creates responsive line, bar, pie, and donut charts as SVG.

It also supports stacked bars, multi-axis charts, and mixed bar-and-line plots, with chart colors, strokes, and labels controlled through CSS.

Features

• Multiple series, value metadata, and explicit XY coordinates.
• Line charts with areas, smoothing, gaps, and XY data.
• Grouped, stacked, distributed, and horizontal bar charts.
• Pie charts, donuts, and partial-circle gauges.
• Mixed chart layers with independent axes.
• Media-query options and experimental container-query options.
• Dynamic data updates, lifecycle events, and plugins.
• Optional live DOM updates, animation, and server-side SVG rendering.

How To Use It

Installation

Include Chartist’s CSS file and import the JavaScript module.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/index.min.css">
<div id="traffic-chart" class="ct-golden-section"></div>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist/dist/index.min.js';
  lineChart('#traffic-chart', {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[24, 38, 31, 46, 41]]
  });
</script>

You can also install the package through npm.

npm install chartist

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

Basic Usage

Each preset takes a container selector or element, chart data, optional configuration, and optional responsive overrides. Create an HTML container for each chart ID shown in these examples.

The required data object has a series property. Line and bar charts use nested arrays.

<div id="line-chart" class="ct-golden-section"></div>
<div id="bar-chart" class="ct-golden-section"></div>
<div id="pie-chart" class="ct-square"></div>

import { barChart, lineChart, pieChart } from 'chartist';
lineChart('#line-chart', {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [[18, 27, 24, 39], [12, 19, 21, 31]]
});
barChart('#bar-chart', {
  labels: ['HTML', 'CSS', 'JavaScript'],
  series: [[42, 35, 28]]
}, { horizontalBars: true });
pieChart('#pie-chart', {
  labels: ['Desktop', 'Tablet', 'Mobile'],
  series: [50, 15, 35]
}, { donut: true });

Advanced Examples

Create a stacked bar chart

stackBars stacks values at each category. For data with both positive and negative numbers, stackMode: 'accumulate-relative' keeps the stacks on opposite sides of zero.

import { barChart } from 'chartist';
barChart('#sales-chart', {
  labels: ['Jan', 'Feb', 'Mar'],
  series: [[8, 11, 9], [4, 7, 5]]
}, {
  stackBars: true,
  stackMode: 'accumulate',
  axisY: { low: 0 }
});

Create a mixed bar and line chart

Use chart() when each series needs a different drawing layer or value axis. Supply each axis with an ID, then connect the corresponding layers through x and y.

import {
  autoScaleAxis, axisGrid, axisLabels, bar,
  cartesianAxes, chart, line, stepAxis
} from 'chartist';
chart('#overview-chart', {
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    series: [
      { name: 'orders', data: [80, 95, 110, 125] },
      { name: 'returns', data: [4, 3, 7, 5] }
    ]
  },
  axes: cartesianAxes([
    { id: 'month', side: 'bottom', type: stepAxis() },
    { id: 'orders', side: 'left', type: autoScaleAxis(), low: 0 },
    { id: 'returns', side: 'right', type: autoScaleAxis(), low: 0 }
  ]),
  layers: [
    axisGrid({ axes: ['month', 'orders'] }),
    bar({ series: ['orders'], x: 'month', y: 'orders' }),
    line({ series: ['returns'], x: 'month', y: 'returns', align: 'center' }),
    axisLabels()
  ]
});

Draw a goal line on a bar chart

A goal or threshold is useful when a chart needs to show performance against a fixed value. The built-in targetLine() layer can appear above the data in either a bar or line preset.

import { barChart, targetLine } from 'chartist';
barChart('#goal-chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr'],
  series: [[820, 950, 1100, 980]]
}, {
  low: 0,
  layers: {
    above: [targetLine({ value: 1000, label: 'Goal' })]
  }
});

Change chart options at smaller screen widths

The fourth argument of a preset accepts [mediaQuery, options] pairs. A narrower rule can override values from an earlier rule. Container-query conditions require the separate match-container polyfill and CSS container-type.

import { lineChart } from 'chartist';
lineChart(
  '#weekly-chart',
  { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [[8, 10, 6, 12, 11]] },
  { showArea: true, axisY: { low: 0 } },
  [
    ['(max-width: 640px)', { showPoint: false }],
    ['(max-width: 400px)', { axisX: { showLabel: false } }]
  ]
);

Update a chart with new data

Keep the chart handle returned by a preset. Call update() with a configuration object to replace chart data, and setOptions() to change preset options.

import { lineChart } from 'chartist';
const salesChart = lineChart('#sales-chart', {
  labels: ['Jan', 'Feb', 'Mar'],
  series: [[12, 15, 19]]
});
salesChart.update({
  data: { labels: ['Apr', 'May', 'Jun'], series: [[16, 23, 21]] }
});
salesChart.setOptions({ showArea: true });

Animate live chart updates

Chartist’s standard renderer creates a new SVG during updates. The experimental liveDomRenderer() updates existing SVG elements, and smilAnimations() animates changes to bars, lines, points, areas, and pie slices.

import { barChart } from 'chartist';
import { liveDomRenderer, smilAnimations } from 'chartist/live';
const chartHandle = barChart('#live-chart', {
  labels: ['Q1', 'Q2', 'Q3'],
  series: [[5, 4, 7]]
}, {
  renderer: liveDomRenderer({ animations: smilAnimations() })
});
chartHandle.update({
  data: { labels: ['Q1', 'Q2', 'Q3'], series: [[7, 6, 5]] }
});

Data Format Reference

Configuration Options

Shared preset options

Line chart options

Bar chart options

Pie and donut chart options

Axis options for line and bar charts

Composed Chart API

chart(containerOrSelector, {
  data,
  layers,
  axes,
  coordinates,
  padding,
  width,
  height,
  viewBox,
  className,
  labels,
  responsive,
  plugins,
  on,
  renderer
});

`chart()` configuration reference

Axis and layer factories

Layer configuration reference

Additional public chart helpers

API Methods

Events And Plugins

A chart executes seven drawing phases. Pass the on object when you need an event from the first render. chart.on() registers listeners for subsequent renders. The core also emits responsive when matching configuration changes. A '*' listener receives the event name and payload. The render and mount phases identify create, update, resize, responsive, and fonts causes, plus added, updated, and removed scene nodes.

import { barChart } from 'chartist';
const chartHandle = barChart(
  '#events-chart',
  { labels: ['Jan', 'Feb', 'Mar'], series: [[12, 18, 15]] },
  {
    on: {
      mount: ({ cause }) => console.log('Rendered:', cause)
    }
  }
);
const onResponsive = ({ currentOptions }) => console.log(currentOptions);
chartHandle.on('responsive', onResponsive);

A chartist plugin is an object with name and install(chart, options?). Optional plugin fields include provides for custom event names and keyframes for update animations. A cleanup function returned by install() runs on destroy(), and a cleanup function returned by a mount listener runs before the next render and on destruction. Supply plugin settings with withOptions(plugin, settings) or a plugin-and-options entry.

import { barChart } from 'chartist';
const highlight = {
  name: 'highlight',
  install(chart) {
    chart.on('compose', node => {
      if (node.role !== 'bar') return;
      return node.addClass('highlighted-bar');
    });
  }
};
barChart('#highlight-chart', { series: [[2, 4, 6]] }, {
  plugins: [highlight]
});

Styling And Customization

Chartist styles its generated SVG using regular CSS. Set custom properties on a chart container, an ancestor, or :root.

#sales-chart {
  --ct-series-a: #2563eb;
  --ct-series-b: #f59e0b;
  --ct-line-width: 2px;
  --ct-point-size: 8px;
  --ct-grid-dasharray: none;
  --ct-label-color: #334155;
}

CSS custom properties

Public SVG class names

`classNames` override properties

Responsive sizing classes

Accessible color palette

Load chartist/themes/accessible.css after the main stylesheet and set ct-theme-accessible on the chart container or one of its ancestors. The palette includes light and dark variants.

In dark themes, declare color-scheme: dark and adjust label and grid colors as needed. Charts that convey important information should also have a text summary or data table.

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

Sass configuration

If the site already compiles Sass, import chartist/scss/index and customize the !default settings. The Sass configuration can change the color palette, ratio classes, output switches, and stroke styles at build time.

@use 'chartist/scss/index' with (
  $ct-series-colors: (#2563eb, #f59e0b, #059669),
  $ct-line-width: 2px,
  $ct-grid-dasharray: false
);

Sass variables

Layout, palette, and CSS output

Labels, grid, and dark mode

Chart geometry

Generated class name variables

Sass mixins

Server-Side SVG Rendering

For static reports or exports, Chartist can build SVG markup in Node.js without a DOM.

import { lineChartConfig } from 'chartist';
import { renderToString, toScene } from 'chartist/server';
const config = lineChartConfig({
  labels: ['Mon', 'Tue', 'Wed'],
  series: [[5, 2, 4]]
});
const svg = renderToString(toScene(config, {
  width: 600,
  height: 300
}));

Alternatives And Related Resources

• ApexCharts.js: Responsive, Interactive SVG Chart Library for Dashboards and Apps
• SVGChart.js: Responsive SVG Line Charts in Vanilla JavaScript
• Lightweight Responsive SVG Charts with CSS Transitions – Beaned-Charts
• Modern SVG Based Chart Library – Frappé Charts