Adding Axis Title to chartjs 3.8.0 Progressive line-CodePudding

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 >
  <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 :)

CodePudding user response：

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>