Interactive Charts with Chart.js

Enable Chart.js in any post with chart_js: true in your frontmatter. The library is loaded from a CDN; your <canvas> elements are the only HTML needed.

Citation Trend — Line Chart

Citations per decade for a landmark 1905 paper:

Papers per Year — Bar Chart

Output by year across five research areas:

Journal Comparison — Radar Chart

Comparing five metrics across three top physics journals (fictionalised scores):

Publication Types — Doughnut Chart

Distribution of output by venue type:

Usage

---
title: My Post With Charts
chart_js: true
---

Then place a <canvas id="myChart"> element where you want the chart, and add a <script> block that calls new Chart(...) using the polling pattern to wait for Chart.js:

(function poll() {
  if (typeof Chart === 'undefined') { setTimeout(poll, 50); return; }
  new Chart(document.getElementById('myChart'), { ... });
})();

Charts use HSL colour values so they adapt cleanly to both light and dark themes when you set backgroundColor with an alpha channel.