Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Shen-Yu/hugo-chart
a Chart.js component for Hugo. :chart_with_upwards_trend:
https://github.com/Shen-Yu/hugo-chart
chartjs hugo hugo-chart hugo-theme shortcode
Last synced: 3 months ago
JSON representation
a Chart.js component for Hugo. :chart_with_upwards_trend:
- Host: GitHub
- URL: https://github.com/Shen-Yu/hugo-chart
- Owner: shen-yu
- License: apache-2.0
- Created: 2020-09-28T07:10:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-17T16:11:34.000Z (over 1 year ago)
- Last Synced: 2024-11-12T17:49:59.821Z (3 months ago)
- Topics: chartjs, hugo, hugo-chart, hugo-theme, shortcode
- Language: Go
- Homepage:
- Size: 114 KB
- Stars: 98
- Watchers: 3
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-hugo - hugo-chart - A Hugo theme component to display beautiful Charts. (Theme Components / Non-Official)
README
# hugo-chart
[](https://github.com/budparr/awesome-hugo)
English | [中文说明](README_zh-CN.md)
## About
This is not a standalone theme. It is a [Hugo](https://gohugo.io) theme component providing a shortcode: `chart` to display [Chart.js](https://www.chartjs.org/) 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/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`:
```yaml
theme: ["hugo-chart", "my-theme"]
```
or, with `config.toml`,
```toml
theme = ["hugo-chart", "my-theme"]
```
3. In your site, use the shortcode, this way:
```go
{{< 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
```go
{{< 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](https://github.com/Shen-Yu/hugo-chart) by [Eric Shen](https://github.com/Shen-Yu) is under [GPL v3](https://github.com/Shen-Yu/hugo-chart/blob/master/LICENSE) license.
