How to integrate Highcharts with Hugo

Highcharts is awesome data visualisation library to generate beautiful graphs. This post will tackle how to include the the highcharts lib and custom chart.js files. In a future post I will try to explain how to generate charts from Dynamic or Markdown content.

Download Highcharts using NPM

I am using NPM as package manager for Hugo, so adding support for Highcharts is as simple as:

npm install highcharts --save

Mount node_modules folder to Hugo

By default Hugo will only process CSS and JS files in the assets folder. So we have to mount node_modules folder to assets/

In your config.toml file, define your mount points.. Mine look like this..

[module]
  [[module.mounts]]
    source = "./node_modules/highcharts"
    target = "assets/js/highcharts"

Highcharts package is now available into the Hugo folder system.

Add the Highcharts Lib to Hugo JS partial template.

Assuming your website has a partial to add JS files. Simply edit this partial to add Highcharts support.

{{ $js_highchart := resources.Get "js/highcharts/highcharts.js" }}
{{ $js_highchart_more := resources.Get "js/highcharts/highcharts-more.js" }}
{{ $js_highchart_custom := resources.Get "js/mycustom_chart.js" }}

{{ $js_highchart_bundle := slice $js_highchart $js_highchart_more $js_highchart_custom | resources.Concat "js/highchart.js" }}

{{- if (eq (getenv "HUGO_ENV") "production") -}}
  {{ $js_highchart_bundle = $js_highchart_bundle | minify | fingerprint "md5" }}
{{ end }}

{{ if .IsHome }}
  <script src="{{ $js_highchart_bundle.RelPermalink }}"></script>
{{ end }}

In the above example, we are also adding the JS file containaing my custom chart. The full path to my custom chart file is:

root/themes/mytheme/assets/js/mycustom_chart.js

Additionally:

JS file is minified and finger printed on Production
JS file can be whitelisted to only certain pages, in my case just the homepage.

hugo