/hugo-chart

a Chart.js component for Hugo. :chart_with_upwards_trend:

Primary LanguageGoApache License 2.0Apache-2.0

hugo-chart

Awesome

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.

Screenshot

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"]
  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 >}}

Bar chart

License

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

visitors-count