Drawing a chart.js with Windmill

[insanity54]

Just a quick show and tell, I was looking for a way to draw a graphic using Windmill. Since there is no DOM, I found a way using a canvas. Credit to #914 for the tip

//npm

import { CategoryScale, Chart, LinearScale, LineController, LineElement, PointElement } from 'chart.js';
import { Canvas } from 'skia-canvas';
import { writeFile } from 'node:fs/promises';

export async function main() {

  Chart.register([
    CategoryScale,
    LineController,
    LineElement,
    LinearScale,
    PointElement
  ]);

  const canvas = new Canvas(400, 300);
  const chart = new Chart(
    canvas as any,
    {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderColor: 'red'
        }]
      }
    }
  );
  const pngBuffer = await canvas.toBuffer('png', { matte: 'white' });

  const filename = './shared/output.png';
  await writeFile(filename, pngBuffer);

  chart.destroy();

  return filename
}

Example output