RevealChart Plugin Reference

Table of Contents

• Overview
• Chart Blocks
• Chart Size Controls
• CSV Datasource
• Datasource Object Form
• Table Blocks
• Table Formatting

Overview

When the revealchart plugin is enabled, markdown supports :chart: and :table: YAML blocks.

In the Presentation Builder, use:

• Add Content -> Insert Chart Block
• Add Content -> Insert Table Block

Chart Blocks

Chart blocks consist of a :chart: command followed by indented YAML. This YAML mirrors the object accepted by Chart.js, see https://www.chartjs.org/docs/latest/ for detailed documentation. Any object in JSON in these online docs should be accepted here, only in YAML syntax.

Example Chart

:chart:
  items:
    - type: line
      data:
        labels: ["Jan", "Feb", "Mar"]
        datasets:
          - label: Attendance
            data: [12, 19, 9]
      options:
        responsive: true

Rendering note:

If charts are blank on later slides, increase Reveal view distance:

---
config:
  viewDistance: 120
  mobileViewDistance: 120
---

Chart Size Controls

Each chart item can include height and width.

:chart:
  items:
    - type: line
      height: 520px
      width: 80%

• Default height: 400px
• Default width: 100%
• Supported units: number (px), px, vh, vw, %, rem, em

CSV Datasource

Use datasource instead of inline data:

:chart:
  items:
    - type: bar
      datasource: attendance.csv
      options:
        responsive: true

Expected CSV shape:

,"Adult","Children","Pets"
"Jan",5,3,7
"Feb",4,8,9
"Mar",1,7,2

Datasource Object Form

:chart:
  items:
    - type: line
      datasource:
        file: attendance.csv
        series: column-series
        labelColumn: C
        dataColumns: E,F
        headerRow: 1
        dataRows: 2:4

Supported object keys:

• file
• series: column-series (default) or row-series
• labelColumn
• dataColumns
• headerRow
• labelRow
• dataRows

Row-series example:

:chart:
  items:
    - type: radar
      datasource:
        file: attendance.csv
        series: row-series
        labelRow: 1
        labelColumn: A
        dataColumns: B:D
        dataRows: 2:4

Table Blocks

:table:
  datasource: attendance.csv
  dataId: attendance-window
  class: lighttable
  overflow: scroll
  height: 320px
  dataColumns: A,C,D,E,F

Supported keys:

• datasource (string or object form)
• id
• dataId
• class
• style
• overflow
• height
• dataColumns
• dataRows

• headerRow
• align
• alignColumns
• format
• formatColumns
• currency
• summarizeColumns

Built-in styles:

• datatable (base)
• lighttable
• darktable

Table Formatting

:table:
  datasource: attendance.csv
  class: darktable
  dataColumns: A,C,D,E,F
  align: left
  alignColumns:
    C: right
    D: right
    E: right
    F: right
  formatColumns:
    C: currency
    D: percentage
  summarizeColumns:
    C: sum
    D: average
  currency: USD

Documentation Hub

Back to Documentation Hub