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 645754254c1ecec06849d9474cc82b2be414a686..ccb310094cfb4cabf8f7e6e662707192a5fb4512 100644 (file)
--- 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 232f3d40d5bda3cb95624d1a73710ca49ce1bd4b..6df4d1f57bfdd6a84392004e4397398d44d1447c 100644 (file)
--- 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 (file)
index 0000000..90d8959
--- /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();
+```