Skip to main
Table of Contents

Chartist Graph

This page demonstrates a responsive two-series Chartist line chart with area fill, custom colors, and a compact legend. It is useful when you need a lightweight chart in static pages without a heavy framework.

Global Users (Millions)

Desktop Mobile

Source: Morgan Stanley Research

How It Works

  • Chart data is defined in labels and two named series arrays.
  • Chartist renders the SVG graph in #chartist--desktop-vs-mobile.
  • Options enable full-width layout, Y-axis formatting, and per-series area fill.
  • Mobile view hides every other X-axis label for readability.

The Code

This page uses one chart target element and one initialization script. Everything else is styling or helper wiring.

new Chartist.Line('#chartist--desktop-vs-mobile', {
  labels: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
  series: [{
    name: 'series-desktop',
    data: [1100, 1225, 1325, 1410, 1475, 1525, 1600, 1715, 1750]
  }, {
    name: 'series-mobile',
    data: [400, 600, 700, 950, 1100, 1300, 1500, 1780, 1900]
  }]
}, {
  fullWidth: true,
  height: '100%',
  chartPadding: {
    top: 20,
    right: 40,
    bottom: 4,
    left: 0
  },
  axisY: {
    offset: 48,
    labelInterpolationFnc: function (value) { return value + 'm'; }
  },
  axisX: {
    showGrid: false
  }
});

Files Used

  • Page HTML: in/example/chartist-graph.html
  • Page SCSS: in/asset/css/content/example/chartist-graph.scss
  • Page JS: in/asset/js/content/example/chartist-graph.js
  • Chart library: in/asset/module/chartist/chartist.js
  • Chart resize helper: in/asset/js/module/chartist.custom.js
  • Chart key icon: in/asset/image/content/example/chartist-graph/graph-key.svg

Attribution