Results of Chart.js integration in Reveal slides

[fuhrmanator]

Description

I followed the advice in https://quarto.org/docs/presentations/revealjs/advanced.html#reveal-plugins to add the https://github.com/rajgoel/reveal.js-plugins/tree/master/chart plugin for reveal. It works, but I was unable to get the simple examples (with CSV data inside the HTML) to work.

Examples that use CSV data in the HTML portion (see below) don't work well, mainly because (as far as I gather) the separate markdown lines get joined into one HTML line. If you try to force line breaks in the markdown, they are converted to <br> in the HTML, which then corrupts the CSV data.

I use Copilot (enterprise through my university) in VSCode, and it easily converts these examples to ones that have embedded dataset in a JSON setting. I gets ugly...

Here's an example of the HTML-embedded data that I couldn't get to work. By forcing line endings (e.g., with two blanks at the end of a line, a backslash before the end of line, etc.) I end up with missing data (on the second line, which can be fixed by adding a column) and a July<br> label (which I couldn't manage to fix).

# Line chart with CSV in the HTML

<canvas data-chart="line">
Month, January, February, March, April, May, June, July
My first dataset, 65, 59, 80, 81, 56, 55, 40
My second dataset, 28, 48, 40, 19, 86, 27, 90
</canvas>

Here's the Quarto snippet that works. It's obviously more complicated when everything is embedded in the JSON string. Again, using an AI for the gory details helps a lot.

## Line chart from JSON string

<div style="height:480px">
<canvas data-chart="line" >
<!--
{
 "data": {
  "labels": ["January"," February"," March"," April"," May"," June"," July"],
  "datasets":[
   {
    "data":[65,59,80,81,56,55,40],
    "label":"My first dataset","backgroundColor":"rgba(20,220,220,.8)",
    "borderColor": "rgba(20,220,220,.8)"
   },
   {
    "data":[28,48,40,19,86,27,90],
    "label":"My second dataset","backgroundColor":"rgba(220,120,120,.8)",
    "borderColor": "rgba(220,120,120,.8)"
   }
  ]
 }
}
-->
</canvas>
</div>

The plugin.yml file is in revealjs-plugins/chart of my project:

name: RevealChart
script: [chart.js, chart.min.js]

The configuration in _quarto.yml:

format:
  revealjs:
    revealjs-plugins:
      - revealjs-plugins/chart

Since https://github.com/rajgoel/reveal.js-plugins/tree/master/chart is just the reveal plugin (which I renamed to revealjs-plugins/chart/chart.js), I also had to download the Chart.js library from https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js which I also saved in revealjs-plugins/chart

Hope this is helpful!

[cscheid]

# Line chart with CSV in the HTML

<canvas data-chart="line">
Month, January, February, March, April, May, June, July
My first dataset, 65, 59, 80, 81, 56, 55, 40
My second dataset, 28, 48, 40, 19, 86, 27, 90
</canvas>

I think you're tempting fate a little bit by writing exposed HTML elements like that: Pandoc will likely attempt to parse it and I think that might be the source of your troubles. What happens when you put those in a raw block?

# Line chart with CSV in the HTML

```{=html}
<canvas data-chart="line">
Month, January, February, March, April, May, June, July
My first dataset, 65, 59, 80, 81, 56, 55, 40
My second dataset, 28, 48, 40, 19, 86, 27, 90
</canvas>
```

[fuhrmanator]

Thanks! I never thought of using raw...

It works (I tweaked it to add the <div> so the chart is bigger). Since there's no JSON config, there are no colors for the different data sets (the defaults don't automatically change them I suppose, but I can maybe configure that somewhere).

# Line chart with CSV in the HTML

```{=html}
<div style="height:480px">
<canvas data-chart="line">
Month, January, February, March, April, May, June, July
My first dataset, 65, 59, 80, 81, 56, 55, 40
My second dataset, 28, 48, 40, 19, 86, 27, 90
</canvas>
</div>
```

[cscheid]

You should be able to write a div in Markdown. It's mostly that you don't want Pandoc to see the weirder elements:

# Line chart with CSV in the HTML

::: {style="height:480px"}

```{=html}
<canvas data-chart="line">
Month, January, February, March, April, May, June, July
My first dataset, 65, 59, 80, 81, 56, 55, 40
My second dataset, 28, 48, 40, 19, 86, 27, 90
</canvas>
```

:::

[fuhrmanator]

For the default colors, there's a solution (a plug-in to Chart.js): https://www.chartjs.org/docs/latest/general/colors.html#per-dataset-color-settings -- not sure yet how to configure the plugin inside Chart.js invoked by the revealjs plug-in to Quarto :)

---

Edit: The solution for the default colors that change without having to specify them in a JSON is to use the UMD version of Chart.js, e.g., https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js

I downloaded it to the plugins directory, and I specify the UMD version in the plugin.yml file:

name: RevealChart
script: [chart.js, chart.umd.js]