Use ChartJS with DataView

Share & showcase
1

There is a Chart JS Obsidian Plugin, but I wanted to use the latest and greatest version of Chart JS.

This is similar to a recent post about using mermaid js with dataview.

Here’s how you can do it in a dataviewjs code block:

```dataviewjs
const ctx = dv.el("canvas", null);

await import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js");

new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
    });
3 Likes
2

How you can fit the page dimention when you want export to a pdf file?

Thanks a lot!

1 Like