Add beautifully rendered line, bar, pie, radial, etc. charts to any slide. Support for charts within GitPitch slide decks is powered by the Reveal.js plugin for Chart.js .

By default, this plugin is disabled. To enable this plugin for your presentation, see Charts Plugin Activation below.

#### Learn By Example - Line Chart

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>



• Your chart properties are defined as a JSON string within HTML comment syntax
• You can add as many data elements as needed inside the datasets array.
• The number of elements within the top-level labels property value should match the size of the data arrays specified within datasets.
• Each element within datasets must provide a data property, plus optional but recommended properties including label, and backgroundColor.

This sample markup snippet is rendered as follows:

#### Learn By Example - Bar Chart

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>



• Your chart properties are defined as a JSON string within HTML comment syntax
• You can add as many data elements as needed inside the datasets
• You can add as many data elements as needed inside the datasets array.
• The number of elements within the top-level labels property value should match the size of the data arrays specified within datasets.
• Each element within datasets must provide a data property, plus optional but recommended properties including label, and backgroundColor.

This sample markup snippet is rendered as follows:

#### Learn By Example - Radar Chart

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:

---

<!--
{
"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>



• Your chart properties are defined as a JSON string within HTML comment syntax
• You can add as many data elements as needed inside the datasets
• You can add as many data elements as needed inside the datasets array.
• The number of elements within the top-level labels property value should match the size of the data arrays specified within datasets.
• Each element within datasets must provide a data property, plus optional but recommended properties including label, and backgroundColor.

This sample markup snippet is rendered as follows:

#### Charts Plugin Activation

charts : true