Adding Axis Title to chartjs 3.8.0 Progressive line
Question
So I recently started working with chartjs. My goal is to create a progressive Line which plotts the sensor data. The Problem is it wont add the Axis title which makes it confusing to read. I tried everything in the documentation but it didnt work.
Label Documentation: https://www.chartjs.org/docs/latest/axes/labelling.html
Progressive Line Documentation: https://www.chartjs.org/docs/latest/samples/animations/progressive-line.html
Here is my code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Daten Logger FP2017</title>
<!-- CSS could also be loaded from local storage or be embedded. --->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'>
</head>
<body>
<h1>Daten Logger FP2017</h1>
<p>Übersicht für die Powersupply FP2017</p>
<!-- All details are shown in a table --->
<div id="details"></div>
<table>
<tr>
<th>Data</th>
<th>Value</th>
</tr>
<tr>
<td>WifiFault:</td>
<td>{string_message_WifiFault}</td>
</tr>
<tr>
<td>Batfault:</td>
<td>{BatFault}</td>
</tr>
<tr>
<td>MainsFault:</td>
<td>{MainsFault}</td>
</tr>
<tr>
<td>SensorFault:</td>
<td>{SensorFault}</td>
</tr>
<tr>
<td>SelftestFault:</td>
<td>{SelftestFault}</td>
</tr>
<tr>
<td>InitialCharge:</td>
<td>{InitialCharge}</td>
</tr>
<tr>
<td>Is:</td>
<td>{str(Is) + " mA"}</td>
</tr>
<tr>
<td>Vs:</td>
<td>{str(Vs) + " mV"}</td>
</tr>
<tr>
<td>Ib:</td>
<td>{str(Ib) + " mA"}</td>
</tr>
<tr>
<td>Vb:</td>
<td>{str(Vb) + " mV"}</td>
</tr>
<tr>
<td>Vb12:</td>
<td>{str(Vb12) + " mV"}</td>
</tr>
<tr>
<td>Vb24:</td>
<td>{str(Vb24) + " mV"}</td>
</tr>
<tr>
<td>T:</td>
<td>{str(T) + " °C"}</td>
</tr>
<tr>
<td>Cap:</td>
<td>{str(Cap) + " mAH"}</td>
</tr>
<tr>
<td>SoC</td>
<td>{str(SoC) + " %"}</td>
</tr>
<tr>
<td>Ri:</td>
<td>{str(Ri) + " mOhm"}</td>
</tr>
<tr>
<td>Ri12:</td>
<td>{str(Ri12) + " mOhm"}</td>
</tr>
<tr>
<td>Ri24:</td>
<td>{str(Ri24) + " mOhm"}</td>
</tr>
</table>
Logging Interval in Sekunden:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<form action="/logging_start" method="get">
Start Data Logging:
<button name="subject" type="submit" value="log_start">START</button>
</form>
<form action="/logging_stop" method="get">
Stop Data Logging:
<button name="subject" type="submit" value="log_stop">STOP</button>
</form>
<div class="chartBox">
<canvas id="myChart" width="400" height="400"></canvas>
<div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = [];
const data2 = [];
let prev = 100;
let prev2 = 80;
for (let i = 0; i < 1000; i++) {
prev += 5 - Math.random() * 10;
data.push({x: i, y: prev});
prev2 += 5 - Math.random() * 10;
data2.push({x: i, y: prev2});
}
const totalDuration = 100;
const delayBetweenPoints = totalDuration / data.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(
100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Data1',
borderColor: 'red',
borderWidth: 1,
radius: 0,
data: data,
},
{
borderColor: 'blue',
borderWidth: 1,
radius: 0,
data: data2,
}]
},
options: {
animation: {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return (ctx.index * delayBetweenPoints);
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return (ctx.index * delayBetweenPoints);
}
}
},
interaction: {
intersect: false
},
plugins: {
legend: false,
display: true,
text: 'Month'
},
scales: {
x: {
type: 'linear',
}
}
}
});
</script>
</body>
</html>
Help is very much appreciated :)
Edit: Thanks for the help this is the working code....
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Daten Logger FP2017</title>
<!-- CSS could also be loaded from local storage or be embedded. --->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'>
</head>
<body>
<h1>Daten Logger FP2017</h1>
<p>Übersicht für die Powersupply FP2017</p>
<!-- All details are shown in a table --->
<div id="details"></div>
<table>
<tr>
<th>Data</th>
<th>Value</th>
</tr>
<tr>
<td>WifiFault:</td>
<td>{string_message_WifiFault}</td>
</tr>
<tr>
<td>Batfault:</td>
<td>{BatFault}</td>
</tr>
<tr>
<td>MainsFault:</td>
<td>{MainsFault}</td>
</tr>
<tr>
<td>SensorFault:</td>
<td>{SensorFault}</td>
</tr>
<tr>
<td>SelftestFault:</td>
<td>{SelftestFault}</td>
</tr>
<tr>
<td>InitialCharge:</td>
<td>{InitialCharge}</td>
</tr>
<tr>
<td>Is:</td>
<td>{str(Is) + " mA"}</td>
</tr>
<tr>
<td>Vs:</td>
<td>{str(Vs) + " mV"}</td>
</tr>
<tr>
<td>Ib:</td>
<td>{str(Ib) + " mA"}</td>
</tr>
<tr>
<td>Vb:</td>
<td>{str(Vb) + " mV"}</td>
</tr>
<tr>
<td>Vb12:</td>
<td>{str(Vb12) + " mV"}</td>
</tr>
<tr>
<td>Vb24:</td>
<td>{str(Vb24) + " mV"}</td>
</tr>
<tr>
<td>T:</td>
<td>{str(T) + " °C"}</td>
</tr>
<tr>
<td>Cap:</td>
<td>{str(Cap) + " mAH"}</td>
</tr>
<tr>
<td>SoC</td>
<td>{str(SoC) + " %"}</td>
</tr>
<tr>
<td>Ri:</td>
<td>{str(Ri) + " mOhm"}</td>
</tr>
<tr>
<td>Ri12:</td>
<td>{str(Ri12) + " mOhm"}</td>
</tr>
<tr>
<td>Ri24:</td>
<td>{str(Ri24) + " mOhm"}</td>
</tr>
</table>
Logging Interval in Sekunden:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<form action="/logging_start" method="get">
Start Data Logging:
<button name="subject" type="submit" value="log_start">START</button>
</form>
<form action="/logging_stop" method="get">
Stop Data Logging:
<button name="subject" type="submit" value="log_stop">STOP</button>
</form>
<div class="chartBox">
<canvas id="myChart" width="400" height="400"></canvas>
<div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = [];
const data2 = [];
let prev = 0;
let prev2 = 0;
for (let i = 0; i < 1000; i++) {
prev += 5 - Math.random() * 10;
data.push({x: i, y: prev});
prev2 += 5 - Math.random() * 10;
data2.push({x: i, y: prev2});
}
const totalDuration = 100;
const delayBetweenPoints = totalDuration / data.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(
100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Data1',
borderColor: 'red',
borderWidth: 1,
radius: 0,
data: data,
},
{
label: 'Data2',
borderColor: 'blue',
borderWidth: 1,
radius: 0,
data: data2,
}]
},
options: {
animation: {
x: {
title: {
display: true,
text: 'x title',
},
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return (ctx.index * delayBetweenPoints);
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return (ctx.index * delayBetweenPoints);
}
}
},
interaction: {
intersect: true,
},
plugins: {
legend: true,
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: 'seconds'
},
},
y: {
type: 'linear',
title: {
display: true,
text: 'mAH'
},
}
}
}
});
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2022-07-11 11:22:48
As described in the docs you linked you need to configure scales[scaleId].title to show a scale title:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { scales: { x: { title: { display: true, text: 'x title' } }, y: { title: { display: true, text: 'y title' } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Chartjs: Rotate Axis Title
Change ChartJs axis title dynamically
ChartJS - Y Axis line not drawing
How to set ChartJS Y axis title?
Add multiple lines as Y axis title in chartJs
ChartJs - Adding padding after Y- Axis
How to hide y axis line in ChartJs?
Specific grid line in X axis in ChartJs
Chartjs for Line chart, values on y-axis
ChartJS. Change axis line color
Related Tags