hugo-highcharts

A (very simple) theme component (shortcode) for the Static Site Generator Hugo to display charts with the help of the Highcharts js library.

• Installation
  • As a module
  • As a git submodule
• Usage
  • Using the shortcode
• Demo
• ToDo
• Credits

Installation

As a module

Add the following line to your config:

[module]
  [[module.imports]]
    disable = false
    ignoreConfig = false
    path = "github.com/cmlnet/hugo-highcharts"

Then run hugo mod get -u. This way you can also update the theme.

As a git submodule

Add hugo-highcharts as a git submodule in your project:

git submodule add https://github.com/cmlnet/hugo-highcharts.git themes/hugo-highcharts

Then add in your config theme = "hugo-highcharts".

In order to update the theme use the following command:

git submodule update --remote --merge

Usage

Please be aware that hugo-highcharts loads the required (minified) scripts and CSS files from the Highcharts servers by default. If you want to host these files loacally – because of data privacy concerns for example – then place highcharts.js and highcharts.css in assets/js/ and assets/css/. This will disable external loading of the files automatically.

Using the shortcode

To embed a chart in your markdown files you have to use the following shortcode:

{{< highcharts-custom chart="UNIQUE_NAME" height="123" width="123" >}}
    chart code
{{< /highcharts-custom >}}

You have to omit the Highcharts.chart('container', { part at the beginning as well as the last });.

height and width are optinal parameters. If not set they will default to height="30rem" and width="100%".

Demo

You can see examples of the different chart types on the official Highcharts site. To see hugo-highcharts in action on my private blog in two posts (both in German):

• "Frauenanteil in deutschen politischen Talkshows" (Source on GitHub)
• "StuPa Wahlbeteiligung 2005 bis 2014" (Source on GitHub)

ToDo

• Ensure js and css is loaded only once in a page (v0.2.0)
• Enable loading of highcharts modules via parameter
• Add shortcodes for generating ready made graphs
• Fallback image (set via param)

Credits

Inspiration from the Dusky Neon Potato theme for Hugo by VVelox