hugo-mod-chartist

hugo-mod-chartist is a module for the static-site generator Hugo. The purpose of the module is to bring chartist.js functionality into Hugo.

The module provides all required files and a head-chartist.html partial which can be included into your theme’s header. The module ships with the Axis title plugin but can be easily extended. To do so fetch the Github repository and edit the gulpfile.js.

Install

General information on how to deal with Hugo modules is available in the Hugo documentation. You can add the module to your Hugo instance by following the steps below:

Add the module to your go.mod. E.g.

module github.com/<myself>/<myHugoInstance>

go 1.14

require github.com/chemiker/hugo-mod-chartist latest

Add the module to the config.toml of your Hugo configuration:

[module]
  [[module.imports]]
    path="github.com/chemiker/hugo-mod-chartist"
    disabled = false
      [[module.imports.mounts]]
        source="dist/layouts/partials/"
        target="layouts/partials/"
      [[module.imports.mounts]]
        source="dist/assets/sass/"
        target="assets/sass/"
      [[module.imports.mounts]]
        source="dist/static/js/"
        target="static/js/"

Update the modules of your Hugo configuration by running hugo mod get -u
Implement the partial template head-chartist.html in your website’s <head>.

Usage

Once you have included the header you can display graphs in posts and pages by using the chartist.js API. E.g.

<div class="ct-chart ct-golden-section" id="myChart"></div>
<script>
  var chart = new Chartist.Line('#myChart', {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
    series: [{
      name: 'series-1',
      data: [2, 2, 3, 4, 2, 4, 2, 1]
    }, {
      name: 'series-2',
      data: [4, 3, 5, 3, 1, 3, 6, 4]
    }],
  }, {
    chartPadding: {
      top: 20,
      right: 0,
      bottom: 30,
      left: 30
    },
    plugins: [
      Chartist.plugins.ctAxisTitle({
        axisX: {
          axisTitle: 'Other numbers',
          axisClass: 'ct-axis-title',
          offset: {
            x: 0,
            y: 50
          },
          textAnchor: 'middle'
        },
        axisY: {
          axisTitle: 'Numbers',
          axisClass: 'ct-axis-title',
          offset: {
            x: 0,
            y: 20
          },
          textAnchor: 'middle',
          flipTitle: true
        }
      })
    ]
  });
</script>

will result in the Figure below:

Download

You can grab the module via GitHub and the Hugo module implementation.

Fetch or Fork on GitHub