From: Josh Kelley <joshkel@gmail.com>
Date: Tue, 25 Feb 2025 16:15:56 +0000 (-0500)
Subject: Add docs on using from Node.js (#12039)
X-Git-Tag: v4.4.9~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a647e0d007ff43e9ddc397603cc9ba1547ca0791;p=thirdparty%2FChart.js.git

Add docs on using from Node.js (#12039)

This has come up a couple of times in Discord, so I thought it would be helpful to have official docs.
---

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 645754254..ccb310094 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -294,6 +294,7 @@ export default defineConfig({
             'getting-started/installation',
             'getting-started/integration',
             'getting-started/usage',
+            'getting-started/using-from-node-js',
           ]
         },
         {
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index 232f3d40d..6df4d1f57 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -3,8 +3,9 @@
 Let's get started with Chart.js!
 
 * **[Follow a step-by-step guide](./usage) to get up to speed with Chart.js**
-* [Install Chart.js](./installation) from npm or a CDN 
+* [Install Chart.js](./installation) from npm or a CDN
 * [Integrate Chart.js](./integration) with bundlers, loaders, and front-end frameworks
+* [Use Chart.js from Node.js](./using-from-node-js)
 
 Alternatively, see the example below or check [samples](../samples).
 
@@ -63,7 +64,7 @@ Now that we have a canvas, we can include Chart.js from a CDN.
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 ```
 
-Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options. 
+Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options.
 
 ```html
 <script>
@@ -90,4 +91,4 @@ Finally, we can create a chart. We add a script that acquires the `myChart` canv
 </script>
 ```
 
-You can see all the ways to use Chart.js in the [step-by-step guide](./usage).
\ No newline at end of file
+You can see all the ways to use Chart.js in the [step-by-step guide](./usage).
diff --git a/docs/getting-started/using-from-node-js.md b/docs/getting-started/using-from-node-js.md
new file mode 100644
index 000000000..90d8959a7
--- /dev/null
+++ b/docs/getting-started/using-from-node-js.md
@@ -0,0 +1,38 @@
+# Using from Node.js
+
+You can use Chart.js in Node.js for server-side generation of plots with help from an NPM package such as [node-canvas](https://github.com/Automattic/node-canvas) or [skia-canvas](https://skia-canvas.org/).
+
+Sample usage:
+
+```js
+import {CategoryScale, Chart, LinearScale, LineController, LineElement, PointElement} from 'chart.js';
+import {Canvas} from 'skia-canvas';
+import fsp from 'node:fs/promises';
+
+Chart.register([
+  CategoryScale,
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement
+]);
+
+const canvas = new Canvas(400, 300);
+const chart = new Chart(
+  canvas, // TypeScript needs "as any" here
+  {
+    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'});
+await fsp.writeFile('output.png', pngBuffer);
+chart.destroy();
+```