mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 23:32:54 +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>
88 lines
1.6 KiB
Markdown
88 lines
1.6 KiB
Markdown
---
|
|
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",
|
|
},
|
|
},
|
|
};
|
|
```
|