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
-
Add the
hugo-chartas a submodule to be able to get upstream changes latergit submodule add https://github.com/Shen-Yu/hugo-chart.git themes/hugo-chart -
Add
hugo-chartas the left-most element of thethemelist variable in your site's or theme's configuration fileconfig.yamlorconfig.toml. Example, withconfig.yaml:theme: ["hugo-chart", "my-theme"]
or, with
config.toml,theme = ["hugo-chart", "my-theme"]
-
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). -
Note that Chartjs is responsive as default, in order for the above code to correctly resize the chart height, the
maintainAspectRatiooption must be set tofalse.
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.