mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 15:22:53 +01:00
53f0d6320e
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>
78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
---
|
|
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
|
|
}
|
|
}
|
|
```
|