title: Chart.js - Setting x-axis based on user input
body: <p>I am a beginner coder that is just learning chart.js. Can anyone help me understand why my x-axis labels are not adjusting to the user's input after pressing the "generate chart" button? I feel like all my code is correct. Here is my code below.</p>
  
  <pre><code>        &lt;td&gt;&lt;input type="number" id="StartFreq"/&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="number" id="StopFreq"/&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="number" id="XTick"/&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;button onclick="generateChart()"&gt;&lt;strong&gt;Generate Chart&lt;/strong&gt;&lt;/button&gt;
      &lt;/section&gt;
  
      &lt;br&gt;
      &lt;br&gt;
      &lt;section&gt;
        &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"&gt;&lt;/script&gt;
        &lt;script&gt;
        let StartFreq = document.getElementById('StartFreq');
        let StopFreq = document.getElementById('StopFreq');
        let XTick = document.getElementById('XTick');
        let ctx = document.getElementById('myChart').getContext('2d');
  
        function generateLabels(){
          let xvals = [];
          for (let i = 0; i &lt; 14; i++) {
            xvals.push(parseFloat(StartFreq.value) + parseFloat(XTick.value) * i )
          }
          return xvals
  
        }
  
        let chart = new Chart(ctx, {
  
        // The type of chart we want to create
        type: 'line',
  
        // The data for our dataset
        data: {
        labels: generateLabels(),
        datasets: [{
        label: 'R-TE10',
        data: [0, 10, 5, 2, 20, 30, 45]
        }]
        },
  
        // Configuration options go here
        options: {
          scales : {
            xAxes:[{
              ticks: {
                beginAtZero: true
              }
            }],
            yAxes : [{
              ticks : {
                beginAtZero : true,
                min : 0,
                max: 10
              }
            }]
          }
  
        }
        });
        function generateChart() {
          generateLabels();
          chart.update()
        }
        &lt;/script&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>For clarification, I want the StartFreq to be at the tick at the bottom leftmost part of the chart while my bottom rightmost tick is the Stop Freq. I want each tick to be evenly dispersed and each tick be worth the Xtick input value. I want the chart to update when I click the Generate chart button.</p>