Add beautifully rendered line, bar, pie, radial, etc. charts to any slideshow presentation. Support for charts within GitPitch slideshow presentations is powered by the the reveal.js plugin for Chart.js.
By default, this plugin is disabled. To enable this plugin for your presentation, see charts plugin activation.
To render any chart you must declare a canvas element on your slide. This required element takes a data-chart property. And that property value determines the style of chart rendered for your custom data. For a line chart, this property value must be set to line. For example, this PITCHME.md markdown snippet:
---
<canvas data-chart="line">
<!--
{
"data": {
"labels": ["January"," February"," March"," April"," May"," June"," July"],
"datasets": [
{
"data":[65,59,80,81,56,55,40],
"label":"Sample Data X",
"backgroundColor":"rgba(20,220,220,.8)"
},
{
"data":[28,48,40,19,86,27,90],
"label":"Sample Data Y",
"backgroundColor":"rgba(120,220,0,.8)"
}
]
},
"options": { "responsive": "true" }
}
-->
</canvas>
Please note the following:
This sample markup snippet is rendered as follows:
To render any chart you must declare a canvas element on your slide. This required element takes a data-chart property. And that property value determines the style of chart rendered for your custom data. For a bar chart, this property value must be set to bar. For example, this PITCHME.md markdown snippet:
---
<canvas data-chart="bar">
<!--
{
"data": {
"labels": ["January"," February"," March"," April"," May"," June"," July"],
"datasets": [
{
"data":[65,59,80,81,56,55,40],
"label":"Sample Data X",
"backgroundColor":"rgba(20,20,220,.8)"
},
{
"data":[28,48,40,19,86,27,90],
"label":"Sample Data Y",
"backgroundColor":"rgba(120,120,220,.8)"
}
]
},
"options": { "responsive": "true" }
}
-->
</canvas>
Please note the following:
This sample markup snippet is rendered as follows:
To render any chart you must declare a canvas element on your slide. This required element takes a data-chart property. And that property value determines the style of chart rendered for your custom data. For a radar chart, this property value must be set to radar. For example, this PITCHME.md markdown snippet:
---
<canvas data-chart="radar">
<!--
{
"data": {
"labels": ["January"," February"," March"," April"," May"," June"," July"],
"datasets": [
{
"data":[65,59,80,81,56,55,40],
"label":"Sample Data X",
"backgroundColor":"rgba(80,160,240,.8)"
},
{
"data":[28,48,40,19,86,27,90],
"label":"Sample Data Y",
"backgroundColor":"rgba(240,160,80,.8)"
}
]
},
"options": { "responsive": "true" }
}
-->
</canvas>
Please note the following:
This sample markup snippet is rendered as follows:
To enable the charts plugin for your presentation add the following property to your PITCHME.yaml file:
charts : true
Once this property has been enabled, a chart can be included on any slide by adding a canvas element with the data-chart attribute set to the desired chart type. The chart can be configured within the canvas body by a JSON string embedded into an HTML comment.
For further details, please see the documentation for the reveal.js plugin for Chart.js.
Note, if your chart is driven by an external csv data file you must specify an absolute URL to that file. If your csv data file lives in your GitHub repo then you will need to use the absolute URL to the raw file. Relative paths are not supported.