mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
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>
This commit is contained in:
Eric Tuvesson
77
library/modules/chartjs/README.md
Normal file
77
library/modules/chartjs/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Chart.js Module
|
||||
|
||||
[](https://github.com/noodlapp/modules/tree/main/modules/noodl-chartjs)
|
||||
|
||||
This module allows you to add charts to your Noodl App, using [Chart.js](https://www.chartjs.org/).
|
||||
|
||||
|
||||
|
||||
Supported chart types:
|
||||
* Line and Area
|
||||
* Bar
|
||||
* Radar
|
||||
* Doughnut
|
||||
* Pie
|
||||
* Polar Area
|
||||
* Bubble
|
||||
* Scatter
|
||||
|
||||
There are many different kinds inputs to change the style of the chart.
|
||||
Like the title, tooltip and legends.
|
||||
|
||||
## Changing the Data
|
||||
|
||||
To style the chart data, it should be added next to the data it want to style.
|
||||
To recreate for example this chart ([Bar Chart Border Radius](https://www.chartjs.org/docs/latest/samples/bar/border-radius.html)).
|
||||
It should send the style in the datasets to the chart.
|
||||
```js
|
||||
Outputs.Data = {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Fully Rounded",
|
||||
data: [99, 41, 94, 1, 32, -63, 36]
|
||||
borderColor: "rgb(255, 99, 132)",
|
||||
backgroundColor: "rgba(255, 99, 132, 0.5)",
|
||||
borderWidth: 2,
|
||||
borderRadius: 1.8,
|
||||
borderSkipped: false
|
||||
},
|
||||
{
|
||||
label: "Small Radius",
|
||||
data: [-59, -80, -62, -25, -40, 58, 95],
|
||||
borderColor: "rgb(54, 162, 235)",
|
||||
backgroundColor: "rgba(54, 162, 235, 0.5)",
|
||||
borderWidth: 2,
|
||||
borderRadius: 5,
|
||||
borderSkipped: false
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Changing the Scales
|
||||
|
||||
```js
|
||||
Outputs.Scales = {
|
||||
x: {
|
||||
stacked: true
|
||||
},
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
}
|
||||
```
|
||||
78
library/modules/chartjs/charts/bar.md
Normal file
78
library/modules/chartjs/charts/bar.md
Normal file
@@ -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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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)"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
50
library/modules/chartjs/charts/bubble.md
Normal file
50
library/modules/chartjs/charts/bubble.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Bubble Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Bubble Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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)"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
39
library/modules/chartjs/charts/doughnut.md
Normal file
39
library/modules/chartjs/charts/doughnut.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Doughnut Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Doughnut Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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)"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
68
library/modules/chartjs/charts/line.md
Normal file
68
library/modules/chartjs/charts/line.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Line Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Line Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
Outputs.Scales = {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Value'
|
||||
},
|
||||
suggestedMin: -10,
|
||||
suggestedMax: 200
|
||||
}
|
||||
}
|
||||
```
|
||||
34
library/modules/chartjs/charts/pie.md
Normal file
34
library/modules/chartjs/charts/pie.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Pie Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Pie Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
Outputs.Data = {
|
||||
labels: [
|
||||
'Red',
|
||||
'Yellow',
|
||||
'Blue'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [10, 20, 30],
|
||||
backgroundColor: [
|
||||
'#FF5382',
|
||||
'#FFCC34',
|
||||
'#00A3F1'
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
62
library/modules/chartjs/charts/polar-area.md
Normal file
62
library/modules/chartjs/charts/polar-area.md
Normal file
@@ -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">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
Outputs.Scales = {
|
||||
r: {
|
||||
pointLabels: {
|
||||
display: true,
|
||||
centerPointLabels: true,
|
||||
font: {
|
||||
size: 18
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
40
library/modules/chartjs/charts/radar.md
Normal file
40
library/modules/chartjs/charts/radar.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Radar Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Radar Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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)"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
81
library/modules/chartjs/charts/scatter.md
Normal file
81
library/modules/chartjs/charts/scatter.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Scatter Chart | Chart.js Module
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Scatter Chart Example
|
||||
|
||||
## Basic
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
</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
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
56
library/modules/chartjs/charts/stacked-line.md
Normal file
56
library/modules/chartjs/charts/stacked-line.md
Normal file
@@ -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">
|
||||
|
||||
|
||||
|
||||
</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
|
||||
}
|
||||
}
|
||||
```
|
||||
87
library/modules/chartjs/examples/custom-axis.md
Normal file
87
library/modules/chartjs/examples/custom-axis.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: Custom Axis
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Custom Axis
|
||||
|
||||
Here is a very rough example of how to setup custom axes, and the different options that are available.
|
||||
|
||||
```js
|
||||
Outputs.Data = {
|
||||
datasets: [
|
||||
{
|
||||
data: [Inputs.data1],
|
||||
yAxisID: "y-axis-1",
|
||||
},
|
||||
{
|
||||
data: [Inputs.data2],
|
||||
yAxisID: "y-axis-2",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Outputs.Scales = {
|
||||
"y-axis-1": {
|
||||
position: "left",
|
||||
title: {
|
||||
display: true,
|
||||
text: "Hello World",
|
||||
},
|
||||
},
|
||||
"y-axis-2": {
|
||||
position: "right",
|
||||
axis: "y",
|
||||
type: "linear",
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
minRotation: 0,
|
||||
maxRotation: 50,
|
||||
mirror: false,
|
||||
textStrokeWidth: 0,
|
||||
textStrokeColor: "",
|
||||
padding: 3,
|
||||
display: true,
|
||||
autoSkip: true,
|
||||
autoSkipPadding: 3,
|
||||
labelOffset: 0,
|
||||
minor: {},
|
||||
major: {},
|
||||
align: "center",
|
||||
crossAlign: "near",
|
||||
showLabelBackdrop: false,
|
||||
backdropColor: "rgba(255, 255, 255, 0.75)",
|
||||
backdropPadding: 2,
|
||||
color: "#666",
|
||||
},
|
||||
display: true,
|
||||
offset: false,
|
||||
reverse: false,
|
||||
bounds: "ticks",
|
||||
grace: 0,
|
||||
grid: {
|
||||
display: true,
|
||||
lineWidth: 1,
|
||||
drawBorder: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
tickLength: 8,
|
||||
offset: false,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0,
|
||||
borderWidth: 1,
|
||||
color: "rgba(0,0,0,0.1)",
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
text: "",
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
color: "#666",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
266
library/modules/chartjs/examples/custom-tooltip/README.md
Normal file
266
library/modules/chartjs/examples/custom-tooltip/README.md
Normal file
@@ -0,0 +1,266 @@
|
||||
---
|
||||
title: Custom Tooltip
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Custom Tooltip
|
||||
|
||||
:::tip
|
||||
|
||||
There are some known timing problems when setting `Plugins Object`,
|
||||
solution is to set the `Plugins Object` on `Did Mount`.
|
||||
|
||||
:::
|
||||
|
||||
## Custom Tooltip Content
|
||||
|
||||
This sample shows how to use the tooltip callbacks to add additional content to the tooltip.
|
||||
[Chart.js Example](https://www.chartjs.org/docs/3.6.0/samples/tooltip/content.html)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
footer: (tooltipItems) => {
|
||||
let sum = 0;
|
||||
|
||||
tooltipItems.forEach(function (tooltipItem) {
|
||||
sum += tooltipItem.parsed.y;
|
||||
});
|
||||
return "Sum: " + sum;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## External HTML Tooltip
|
||||
|
||||
This sample shows how to use the external tooltip functionality to generate an HTML tooltip.
|
||||
[Chart.js Example](https://www.chartjs.org/docs/3.6.0/samples/tooltip/html.html)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector("div");
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
|
||||
tooltipEl.style.borderRadius = "3px";
|
||||
tooltipEl.style.color = "white";
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.pointerEvents = "none";
|
||||
tooltipEl.style.position = "absolute";
|
||||
tooltipEl.style.transform = "translate(-50%, 0)";
|
||||
tooltipEl.style.transition = "all .1s ease";
|
||||
|
||||
const table = document.createElement("table");
|
||||
table.style.margin = "0px";
|
||||
|
||||
tooltipEl.appendChild(table);
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
const externalTooltipHandler = (context) => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map((b) => b.lines);
|
||||
|
||||
const tableHead = document.createElement("thead");
|
||||
|
||||
titleLines.forEach((title) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const th = document.createElement("th");
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
|
||||
th.appendChild(text);
|
||||
tr.appendChild(th);
|
||||
tableHead.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableBody = document.createElement("tbody");
|
||||
bodyLines.forEach((body, i) => {
|
||||
const colors = tooltip.labelColors[i];
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = "2px";
|
||||
span.style.marginRight = "10px";
|
||||
span.style.height = "10px";
|
||||
span.style.width = "10px";
|
||||
span.style.display = "inline-block";
|
||||
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.backgroundColor = "inherit";
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.style.borderWidth = 0;
|
||||
|
||||
const text = document.createTextNode(body);
|
||||
|
||||
td.appendChild(span);
|
||||
td.appendChild(text);
|
||||
tr.appendChild(td);
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableRoot = tooltipEl.querySelector("table");
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.appendChild(tableHead);
|
||||
tableRoot.appendChild(tableBody);
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + "px";
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + "px";
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding =
|
||||
tooltip.options.padding + "px " + tooltip.options.padding + "px";
|
||||
};
|
||||
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
position: "nearest",
|
||||
external: externalTooltipHandler,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Only show titles
|
||||
|
||||
For this we just change the code to only return the titles.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
```js
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector("div");
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
|
||||
tooltipEl.style.borderRadius = "3px";
|
||||
tooltipEl.style.color = "white";
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.pointerEvents = "none";
|
||||
tooltipEl.style.position = "absolute";
|
||||
tooltipEl.style.transform = "translate(-50%, 0)";
|
||||
tooltipEl.style.transition = "all .1s ease";
|
||||
|
||||
const table = document.createElement("table");
|
||||
table.style.margin = "0px";
|
||||
|
||||
tooltipEl.appendChild(table);
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
const externalTooltipHandler = (context) => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map((b) => b.lines);
|
||||
|
||||
const tableHead = document.createElement("thead");
|
||||
|
||||
titleLines.forEach((title) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const th = document.createElement("th");
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
|
||||
th.appendChild(text);
|
||||
tr.appendChild(th);
|
||||
tableHead.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableRoot = tooltipEl.querySelector("table");
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.appendChild(tableHead);
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + "px";
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + "px";
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding =
|
||||
tooltip.options.padding + "px " + tooltip.options.padding + "px";
|
||||
};
|
||||
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
position: "nearest",
|
||||
external: externalTooltipHandler,
|
||||
},
|
||||
};
|
||||
```
|
||||
62
library/modules/chartjs/guides/interactions.md
Normal file
62
library/modules/chartjs/guides/interactions.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Chart.js Interactions
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Interactions
|
||||
|
||||
This guide is based on the documentation from Chart.js, which can be found [here](https://www.chartjs.org/docs/latest/configuration/interactions.html).
|
||||
|
||||
## Converting Events to Data Values
|
||||
|
||||
A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In this screenshot, we connect the "Click", "Data" and "Helpers" outputs to a function node to be able to process the chart data.
|
||||
|
||||
With this code in the Function node, we can start by getting the values on the X and Y axis.
|
||||
|
||||
```js
|
||||
const data = Inputs.data;
|
||||
const helpers = Inputs.helpers;
|
||||
|
||||
const canvasPosition = helpers.getRelativePosition(data, data.chart);
|
||||
|
||||
// Substitute the appropriate scale IDs
|
||||
const dataX = data.chart.scales.x.getValueForPixel(canvasPosition.x);
|
||||
const dataY = data.chart.scales.y.getValueForPixel(canvasPosition.y);
|
||||
```
|
||||
|
||||
Now with `dataX` and `dataY` we know what values the user clicked on.
|
||||
|
||||
To continue from here, you can follow [Chart.js guides](https://www.chartjs.org/docs/latest/configuration/interactions.html).
|
||||
|
||||
There are for examples [getPixelForValue](https://www.chartjs.org/docs/latest/api/classes/Scale.html#getpixelforvalue), that returns the location of the given data point.
|
||||
|
||||
### Before Event
|
||||
|
||||
Make all the connections under the "Before Event" category and helpers from the "Click Event" category,
|
||||
and this function will be triggered on any of the before events.
|
||||
|
||||
```js
|
||||
const chart = Inputs.chart;
|
||||
const args = Inputs.args;
|
||||
const helpers = Inputs.helpers;
|
||||
|
||||
const canvasPosition = helpers.getRelativePosition(args.event, chart);
|
||||
|
||||
// Substitute the appropriate scale IDs
|
||||
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
|
||||
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
|
||||
|
||||
console.log({
|
||||
canvasPosition,
|
||||
dataX,
|
||||
dataY,
|
||||
});
|
||||
```
|
||||
36
library/modules/chartjs/nodes/bar.md
Normal file
36
library/modules/chartjs/nodes/bar.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Bar Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Bar Chart
|
||||
|
||||
This visual node adds a bar chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/bar) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/bubble.md
Normal file
36
library/modules/chartjs/nodes/bubble.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Bubble Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Bubble Chart
|
||||
|
||||
This visual node adds a bubble chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/bubble) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/doughnut.md
Normal file
36
library/modules/chartjs/nodes/doughnut.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Doughnut Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Doughnut Chart
|
||||
|
||||
This visual node adds a doughnut chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/doughnut) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/line.md
Normal file
36
library/modules/chartjs/nodes/line.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Line Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Line Chart
|
||||
|
||||
This visual node adds a line chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/line) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/pie.md
Normal file
36
library/modules/chartjs/nodes/pie.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Pie Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Pie Chart
|
||||
|
||||
This visual node adds a pie chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/pie) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/polar-area.md
Normal file
36
library/modules/chartjs/nodes/polar-area.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Polar Area Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Polar Area Chart
|
||||
|
||||
This visual node adds a polar area chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/polar-area) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/radar.md
Normal file
36
library/modules/chartjs/nodes/radar.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Radar Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radar Chart
|
||||
|
||||
This visual node adds a radar chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/radar) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/scatter.md
Normal file
36
library/modules/chartjs/nodes/scatter.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Scatter Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Scatter Chart
|
||||
|
||||
This visual node adds a scatter chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/scatter) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
95
library/modules/chartjs/nodes/shared/_inputs.md
Normal file
95
library/modules/chartjs/nodes/shared/_inputs.md
Normal file
@@ -0,0 +1,95 @@
|
||||
|
||||
### General Options
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Index Axis</span> | |
|
||||
| <span className="ndl-data">Responsive</span> | Resizes the chart canvas when its parent node changes size. |
|
||||
| <span className="ndl-data">Maintain Aspect Ratio</span> | Maintain the original canvas aspect ratio (width / height) when resizing. |
|
||||
| <span className="ndl-data">Aspect Ratio</span> | Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Default: 1 |
|
||||
|
||||
### Animation
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">On Data Update</span> | When false, it wont animate when you update the data object. ([Preventing Animations](https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations)) |
|
||||
|
||||
### Title
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Show Title</span> | Is the title shown? |
|
||||
| <span className="ndl-data">Text</span> | Title text to display. |
|
||||
| <span className="ndl-data">Align</span> | Alignment of the title. |
|
||||
| <span className="ndl-data">Position</span> | Position of title. |
|
||||
| <span className="ndl-data">Color</span> | Color of text. |
|
||||
|
||||
### Title Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Tooltips
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Show Tooltips</span> | Are on-canvas tooltips enabled? |
|
||||
| <span className="ndl-data">Mode</span> | Sets which elements appear in the tooltip. |
|
||||
| <span className="ndl-data">Position</span> | The mode for positioning the tooltip. |
|
||||
| <span className="ndl-data">Background Color</span> | Background color of the tooltip. |
|
||||
| <span className="ndl-data">Body Color</span> | Color of body text. |
|
||||
| <span className="ndl-data">Spacing</span> | Spacing to add to top and bottom of each tooltip item. |
|
||||
| <span className="ndl-data">Corner Radius</span> | Radius of tooltip corner curves. |
|
||||
| <span className="ndl-data">Display Colors</span> | If true, color boxes are shown in the tooltip. |
|
||||
|
||||
### Tooltips Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Legend Labels
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Text Color</span> | |
|
||||
| <span className="ndl-data">Text Align</span> | |
|
||||
| <span className="ndl-data">Use Point Style</span> | |
|
||||
| <span className="ndl-data">Point Style</span> | |
|
||||
|
||||
### Legend Label Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Data Decimation
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enabled</span> | Is decimation enabled? |
|
||||
| <span className="ndl-data">Algorithm</span> | Decimation algorithm to use. See the [more...](https://www.chartjs.org/docs/latest/configuration/decimation.html#decimation-algorithms) |
|
||||
| <span className="ndl-data">Samples</span> | If the `lttb` algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel. |
|
||||
| <span className="ndl-data">Threshold</span> | If the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width. The number of point after decimation can be higher than the `threshold` value. |
|
||||
|
||||
### Interaction
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Intersect</span> | If true, the interaction mode only applies when the mouse position intersects an item on the chart. |
|
||||
| <span className="ndl-data">Mode</span> | Sets which elements appear in the interaction. |
|
||||
| <span className="ndl-data">Axis</span> | |
|
||||
| <span className="ndl-data">Include Invisible</span> | If true, the invisible points that are outside of the chart area will also be included when evaluating interactions. |
|
||||
27
library/modules/chartjs/nodes/shared/_outputs.md
Normal file
27
library/modules/chartjs/nodes/shared/_outputs.md
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
### Click Event
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Data</span> | |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | |
|
||||
|
||||
### Before Event
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Chart</span> | |
|
||||
| <span className="ndl-data">Args</span> | |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Before</span> | |
|
||||
|
||||
### Debug
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Chart.js Options</span> | |
|
||||
28
library/modules/chartjs/release-notes.md
Normal file
28
library/modules/chartjs/release-notes.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Release Notes
|
||||
hide_title: true
|
||||
---
|
||||
# Release Notes
|
||||
|
||||
Version 1.4.3 [2023-06-08]
|
||||
* Add Animation `On Data Update` input on Chart nodes, provides the ability to prevent animations when updating the chart in real time. ([Preventing Animations](https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations))
|
||||
* Add Animations object to all nodes, similar to Scales, making it possible to create nicer animations. ([Chart.js Animations](https://www.chartjs.org/docs/latest/configuration/animations.html#animations))
|
||||
|
||||
Version 1.4.2 [2023-05-16]
|
||||
* Add Chart node, custom node allowing a full Chart.js config to create the chart.
|
||||
|
||||
Version 1.4.1 [2023-05-04]
|
||||
* Add Helpers output to all nodes, allowing for interactions.
|
||||
|
||||
Version 1.4.0 [2023-04-06]
|
||||
* Change "Maintain Aspect Ratio" default from `true` to `false`
|
||||
* Fix responsiveness
|
||||
* Fix default inputs not applied
|
||||
* Fix issue when data is updated before Did Mount
|
||||
* Add a link to docs on each node
|
||||
|
||||
Version 1.3.0 [2023-03-31]
|
||||
* Support for Before Event and Click Event
|
||||
* Support for Data Decimation plugin
|
||||
* Support for Interaction
|
||||
* Only show default chart data when there is no connection to data
|
||||
Reference in New Issue
Block a user