A chart.js component for Hugo

tips & tricks
1

Hi, it’s Eric Shen , a developer from China, Creator of hexo-theme-ayer and hexo-tag-chart , as i’m intersted in static site generators, after I saw Hugo, I was deeply attracted to it, then hugo-chart was released, It is a Hugo theme component providing a shortcode: chart to display beautiful Charts in your Hugo site. Have fun !

Usage

  1. Add the hugo-chart as a submodule to be able to get upstream changes later git submodule add https://github.com/Shen-Yu/hugo-chart.git themes/hugo-chart
  2. Add hugo-chart as the left-most element of the theme list variable in your site’s or theme’s configuration file config.yaml or config.toml . Example, with config.yaml :

theme: [“hugo-chart”, “my-theme”]

or, with config.toml ,

theme = [“hugo-chart”, “my-theme”]

  1. In your site, use the shortcode, this way:

{{< chart [width] [height] >}} // Chartjs options goes here {{< /chart >}}

Name Type Default Description
width decimal 100% The width of chart, responsive in window.
height number 300 The height of chart (px).
  1. Note that Chartjs is responsive as default, in order for the above code to correctly resize the chart height, the maintainAspectRatio option must be set to false .
10 Likes