Graph
Beautifully showcase your data with graphs based on chart.js
Display any chart, responsive and highly configurable, powered by Chart.js
Display any chart, responsive and highly configurable, powered by Chart.js
+++
fragment = "graph"
weight = 110
background = "secondary"
title = "Graph Fragment"
subtitle = "Beautifully showcase your data with graphs based on chart.js"
#height = "400px"
#width = "100%"
+++
{
"type": "line",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"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": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero":true
}
}]
}
}
}
type: number (number with unit as suffix) default: 400px
type: string (number with unit as suffix) default: 100%
Global variables are documented as well and have been omitted from this page.
Highly customizable open source theme for Hugo based static websites