How to integrate Highcharts with Hugo

Beautiful charts and graphs for your Hugo web data

Posted on 6 January 2020

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..

    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:



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