sciolism

hugo-mod-chartist

Since version 0.59.0 Hugo supports modules. To be honest I found it rather hard to understand how this works but also what the use cases are. Maybe my mindset is still too used to the WordPress world with all the hooks and filters.

However, I finally found a use case for a module. The purpose of the module is to bring in chartist.js functionality into Hugo. Basically the module is a wrapper that does all the hassle of providing the required resources so you only have to include the head-chartist.html partial into your theme’s header and you can start to create graphs.

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:

More information on how to install the module is available in the GitHub repository and the project website.

Chartist.js does also feature plugins. While I’ve only included the Axis title plugin – I was a bit surprised that this important functionality is not included in the core. Other plugins can easily be added by fetching the source and adjust gulpfile.js.