a Chart.js component for Hugo. :chart_with_upwards_trend:
English | 中文说明
This is not a standalone theme. It is a Hugo theme component providing a shortcode: chart
to display Chart.js in your Hugo site.
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
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"]
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 maintainAspectRatio
option must be set to false
.
{{< 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 >}}
hugo-chart by Eric Shen is under GPL v3 license.