jiunjiun69/hugo-chart

a Chart.js component for Hugo. :chart_with_upwards_trend:

hugo-chart

English | 中文说明

About

This is not a standalone theme. It is a Hugo theme component providing a shortcode: chart to display Chart.js in your Hugo site.

Usage

1. Add the hugo-chart as a submodule to be able to get upstream changes later git submodule add https://github.com/jiunjiun69/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"]

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

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

   Name	Type	Default	Description
   width	number	100	The width of chart, responsive in window (%).
   height	number	300	The height of chart (px).

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

Example

{{< chart 90 200 >}}
{
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Bar Chart',
            data: [12, 19, 18, 16, 13, 14],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
}
{{< /chart >}}

License

hugo-chart by Eric Shen is under GPL v3 license.