Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
2026-01-11 23:02:54 +01:00 · 2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
--- a/library/modules/chartjs/charts/bar.md
+++ b/library/modules/chartjs/charts/bar.md
@@ -0,0 +1,78 @@
+---
+title: Bar Chart Example | Chart.js Module
+hide_title: true
+---
+
+# Bar Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/bar-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                [32, 36],
+                [-86, 50],
+                [-37, 0],
+                [-3, 43],
+                [3, -46],
+                [-36, 6],
+                [3, 4]
+            ],
+            backgroundColor: "rgb(255, 99, 132)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                [91, 31],
+                [50, -56],
+                [-79, -14],
+                [44, -47],
+                [91, 78],
+                [12, 53],
+                [-71, -16]
+            ],
+            backgroundColor: "rgb(54, 162, 235)"
+        }
+    ]
+}
+```
+
+## Horizontal
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/horizontal-bar-chart.png)
+
+</div>
+
+Change the "Index Axis" to "Y" in the property panel.
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [-91.99588477, 52.35768176, -57.81550069, 61.43518519, 64.43072702, -1.91529492, 57.45884774],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [74.65192044, -58.97805213, -37.25823045, -50.31207133, 37.66289438, 43.95061728, -43.79458162],
+            borderColor: "rgb(54, 162, 235)",
+            backgroundColor: "rgba(54, 162, 235, 0.5)"
+        }
+    ]
+}
+```
--- a/library/modules/chartjs/charts/bubble.md
+++ b/library/modules/chartjs/charts/bubble.md
@@ -0,0 +1,50 @@
+---
+title: Bubble Chart | Chart.js Module
+hide_title: true
+---
+
+# Bubble Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/bubble-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                { x: 6.64266118, y: 17.53858025, r: 9.3146433470507550 },
+                { x: 96.5149177, y: 11.62894376, r: 7.6109825102880660 },
+                { x: 76.4077503, y: 26.60408093, r: 11.861539780521262 },
+                { x: 58.6668381, y: 93.32818930, r: 6.2947102194787380 },
+                { x: 63.0452674, y: 61.18398491, r: 9.2129629629629620 },
+                { x: 61.1479766, y: 9.183813440, r: 11.881730109739369 },
+                { x: 87.5428669, y: 23.74742798, r: 14.084962277091908 }
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                { x: 13.47350823, y: 60.22333676, r: 10.254929698216735 },
+                { x: 18.52066187, y: 81.83427641, r: 13.214334705075446 },
+                { x: 18.52666324, y: 36.67566872, r: 8.6403034979423870 },
+                { x: 88.80015432, y: 63.01911866, r: 5.5760459533607690 },
+                { x: 89.83496228, y: 62.09919410, r: 14.916623799725650 },
+                { x: 78.42121056, y: 75.89120370, r: 11.631172839506174 },
+                { x: 85.42309671, y: 31.55564129, r: 13.651791838134430 }
+            ],
+            borderColor: "rgb(255, 159, 64)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        }
+    ]
+}
+```
--- a/library/modules/chartjs/charts/doughnut.md
+++ b/library/modules/chartjs/charts/doughnut.md
@@ -0,0 +1,39 @@
+---
+title: Doughnut Chart | Chart.js Module
+hide_title: true
+---
+
+# Doughnut Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/doughnut-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["Red", "Orange", "Yellow", "Green", "Blue"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [96.79955418, 80.80761317, 36.31772977, 64.56447188, 7.52314815],
+            backgroundColor: [
+                "rgb(255, 99, 132)",
+                "rgb(255, 159, 64)",
+                "rgb(255, 205, 86)",
+                "rgb(75, 192, 192)",
+                "rgb(54, 162, 235)",
+                "rgb(153, 102, 255)",
+                "rgb(201, 203, 207)",
+                "rgba(255, 99, 132, 0.5)",
+                "rgba(255, 99, 132, 0.5)",
+                "rgba(75, 192, 192, 0.5)",
+                "rgba(54, 162, 235, 0.5)"
+            ]
+        }
+    ]
+}
+```
--- a/library/modules/chartjs/charts/line.md
+++ b/library/modules/chartjs/charts/line.md
@@ -0,0 +1,68 @@
+---
+title: Line Chart | Chart.js Module
+hide_title: true
+---
+
+# Line Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/line-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                -95.88820302, 46.40775034, 99.6090535, 6.92558299, 37.49314129,
+                -58.07098765, 41.22085048
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                48.94890261, 26.84156379, 73.66426612, -52.55829904, 21.01337449,
+                -29.07750343, -0.36179698
+            ],
+            borderColor: "rgb(54, 162, 235)",
+            backgroundColor: "rgba(54, 162, 235, 0.5)"
+        }
+    ]
+}
+```
+
+### Change Interpolation modes
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/line-interpolation-chart.png)
+
+</div>
+
+```js
+Outputs.Scales = {
+    x: {
+        display: true,
+        title: {
+            display: true
+        }
+    },
+    y: {
+        display: true,
+        title: {
+            display: true,
+            text: 'Value'
+        },
+        suggestedMin: -10,
+        suggestedMax: 200
+    }
+}
+```
--- a/library/modules/chartjs/charts/pie.md
+++ b/library/modules/chartjs/charts/pie.md
@@ -0,0 +1,34 @@
+---
+title: Pie Chart | Chart.js Module
+hide_title: true
+---
+
+# Pie Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/pie-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: [
+        'Red',
+        'Yellow',
+        'Blue'
+    ],
+    datasets: [
+        {
+            data: [10, 20, 30],
+            backgroundColor: [
+                '#FF5382',
+                '#FFCC34',
+                '#00A3F1'
+            ],
+        }
+    ]
+}
+```
--- a/library/modules/chartjs/charts/polar-area.md
+++ b/library/modules/chartjs/charts/polar-area.md
@@ -0,0 +1,62 @@
+---
+title: Polar Area Chart | Chart.js Module
+hide_title: true
+---
+
+# Polar Area Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/polar-area-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                5.64900549, 32.6611797, 33.64454733, 91.31515775, 18.01868999,
+                33.50823045, 9.38871742
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                80.22805213, 21.33487654, 93.20301783, 52.62259945, 30.45781893,
+                76.09139232, 68.53566529
+            ],
+            borderColor: "rgb(54, 162, 235)",
+            backgroundColor: "rgba(54, 162, 235, 0.5)"
+        }
+    ]
+}
+```
+
+### Centered point labels
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/polar-area-centered-labels-chart.png)
+
+</div>
+
+```js
+Outputs.Scales = {
+    r: {
+        pointLabels: {
+            display: true,
+            centerPointLabels: true,
+            font: {
+                size: 18
+            }
+        }
+    }
+}
+```
--- a/library/modules/chartjs/charts/radar.md
+++ b/library/modules/chartjs/charts/radar.md
@@ -0,0 +1,40 @@
+---
+title: Radar Chart | Chart.js Module
+hide_title: true
+---
+
+# Radar Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/radar-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                68.09585048, 29.88168724, 29.83624829, 69.19410151, 89.93055556,
+                19.20610425, 80.47753772
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                71.27572016, 7.65003429, 35.27949246, 7.2505144, 28.50137174,
+                66.93329904, 31.1882716
+            ],
+            borderColor: "rgb(54, 162, 235)",
+            backgroundColor: "rgba(54, 162, 235, 0.5)"
+        }
+    ]
+}
+```
--- a/library/modules/chartjs/charts/scatter.md
+++ b/library/modules/chartjs/charts/scatter.md
@@ -0,0 +1,81 @@
+---
+title: Scatter Chart | Chart.js Module
+hide_title: true
+---
+
+# Scatter Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/scatter-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                { x: 47.22136488, y: 88.67283951, r: 1 },
+                { x: 84.31584362, y: 63.31875857, r: 1 },
+                { x: 44.76423182, y: 92.18278464, r: 1 },
+                { x: 40.91220850, y: 6.129115230, r: 1 },
+                { x: 92.51286008, y: 54.54046639, r: 1 },
+                { x: 71.17112483, y: 16.42918381, r: 1 },
+                { x: 11.45490398, y: 78.21502058, r: 1 }
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                { x: 5.441100820, y: 16.07981824, r: 1 },
+                { x: 91.04381001, y: 51.57964678, r: 1 },
+                { x: 4.938700270, y: 53.64326132, r: 1 },
+                { x: 22.43441358, y: 60.54226680, r: 1 },
+                { x: 4.024777090, y: 73.51123114, r: 1 },
+                { x: 6.499914270, y: 34.52546296, r: 1 },
+                { x: 60.72402263, y: 70.74545610, r: 1 }
+            ],
+            borderColor: "rgb(255, 159, 64)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        }
+    ]
+}
+```
+
+### Multi axis
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/scatter-multi-axis-chart.png)
+
+</div>
+
+```js
+Outputs.Scales = {
+    y: {
+        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for  log    scale for instance
+        position: 'left',
+        ticks: {
+            color: "rgb(255, 99, 132)",
+        }
+    },
+    y2: {
+        type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for  log    scale for instance
+        position: 'right',
+        reverse: true,
+        ticks: {
+            color: "rgb(54, 162, 235)",
+        },
+        grid: {
+            drawOnChartArea: false // only want the grid lines for one axis to show up
+        }
+    }
+}
+```
--- a/library/modules/chartjs/charts/stacked-line.md
+++ b/library/modules/chartjs/charts/stacked-line.md
@@ -0,0 +1,56 @@
+---
+title: Stacked Line Chart | Chart.js Module
+hide_title: true
+---
+
+# Stacked Line Chart Example
+
+## Basic
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/charts/stacked-line-chart.png)
+
+</div>
+
+```js
+Outputs.Data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "Dataset 1",
+            data: [
+                -95.88820302, 46.40775034, 99.6090535, 6.92558299, 37.49314129,
+                -58.07098765, 41.22085048
+            ],
+            borderColor: "rgb(255, 99, 132)",
+            backgroundColor: "rgba(255, 99, 132, 0.5)"
+        },
+        {
+            label: "Dataset 2",
+            data: [
+                48.94890261, 26.84156379, 73.66426612, -52.55829904, 21.01337449,
+                -29.07750343, -0.36179698
+            ],
+            borderColor: "rgb(54, 162, 235)",
+            backgroundColor: "rgba(54, 162, 235, 0.5)"
+        }
+    ]
+}
+```
+
+```js
+Outputs.Scales = {
+  y: {
+    stacked: true
+  }
+}
+```
+
+```js
+Outputs.Plugins = {
+  filler: {
+    propagate: true
+  }
+}
+```