I managed to create a linear graph using Chart.js, but I need to display it in a different position than the default one.
I found examples on how to rotate the labels on the graph, but this only affects the text and not the entire graph itself.
Here is the current code I am using to generate the graph:
var dataSets = [
dt1 = {
borderColor: "#434EDA",
data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82],
fill: false,
label: "Dataset1",
pointHitRadius: 5,
pointRadius: 5
},
dt2 = {
borderColor: "#3DE383",
data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42],
fill: false,
label: "Dataset2",
pointHitRadius: 5,
pointRadius: 5
},
dt3 = {
borderColor: "#ec0000",
data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9],
fill: false,
label: "Dataset3",
pointHitRadius: 5,
pointRadius: 5
}
]
var grafValues = {
labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts"],
datasets: dataSets
}
var grafOptions = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth"
},
position: 'left'
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C"
},
position: 'top'
}]
},
title: {
display: true,
text: "Graphic 1"
},
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 40,
fontColor: 'black'
}
},
tooltips: {
enabled: true
}
}
var ctx = document.getElementById('chart-zone').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: grafValues,
options: grafOptions
})<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="chart-zone"></canvas>
</body>
I am looking to rotate the graph as shown in the following image:
https://i.sstatic.net/MWoQj.png
EDIT
After further research in the Chart.js documentation, I discovered an option that allows for positioning the axis to the "right", "left", "top", or "bottom."
Apply these options in the following part of the code:
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth"
},
position: 'left' // Change X-axis position
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C"
},
position: 'top' // Change Y-axis position
}]
However, by making these adjustments, the values on the X-axis have disappeared. Make the changes in the code to see what I mean.
Thank you in advance for your help and suggestions.