Repository files navigation

English |中文说明

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

1. Add thehugo-chart as a submodule to be able to get upstream changes latergit submodule add https://github.com/Shen-Yu/hugo-chart.git themes/hugo-chart

2. Addhugo-chart as the left-most element of thetheme list variable in your site's or theme's configuration fileconfig.yaml orconfig.toml. Example, withconfig.yaml:

   theme:["hugo-chart", "my-theme"]

   or, withconfig.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, themaintainAspectRatio option must be set tofalse.

{{<chart90200>}}{type: 'bar',data: {labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],datasets: [{label: 'BarChart',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 byEric Shen is underGPL v3 license.