Charts


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.


Line Chart - Learn By Example

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:

  • 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:

CHARTS


Bar Chart - Learn By Example

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:

  • 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


Radar Chart - Learn By Example

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:

  • 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:

RADAR CHART


Charts Plugin Activation

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.