mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +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:
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
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user