Graph

Beautifully showcase your data with graphs based on chart.js

Display any chart, responsive and highly configurable, powered by Chart.js

Graph Fragment

Beautifully showcase your data with graphs based on chart.js

Code (index)

+++
fragment = "graph"
weight = 110
background = "secondary"

title = "Graph Fragment"
subtitle = "Beautifully showcase your data with graphs based on chart.js"
#height = "400px"
#width = "100%"
+++

Code (config.json)

``` { "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 } }] } } } ```

Documentation

Variables

height

type: number (number with unit as suffix) default: 400px

width

type: string (number with unit as suffix) default: 100%

Global variables are documented as well and have been omitted from this page.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites