title: Can't figure out how to skip first datapoint on the x-axis and labels on X-axis skip second-to-last datapoint with Chart.js
body: <p>Am having a problem in Chart.js where the first label on my X-axis gets too close to the Y-axis, so I would like to skip the first data label so that the first label visible is 30. Additionally, my intervals generally skip in increments of 30, with the exception of the last interval on the x-axis which increases by 59. How do I fix this? I'm seeing weird labels (1,31,61...,301,360) and would like to see (30,60,90,...,330,360), and can't figure it out from the documentation.</p>
  
  <p>I am also OK with hardcoding the x-axis labels to be ["",30,60,90,...360] as long as the underlying data for the other points remains there. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var x_vals = [];
  var y_vals = [];
  for (var i = 1; i &lt; 361; i++) {
    x_vals.push(i);
    y_vals.push(1000 - i);
  }
  
  var obj = {
    "chart_type": "line",
    "x_values": x_vals,
    "series_name": "whatever",
    "y_values": y_vals,
    "chart_title": "Something",
  };
  createSingleChartFromObj("chart1", obj);
  
  // for a single-y-axis
  function createSingleChartFromObj(canvasID, obj) {
    let myChart = document.getElementById(canvasID).getContext('2d'); //getContext is for canvas
  
  
    var massPopChart = new Chart(myChart, {
      type: obj['chart_type'],
      data: {
        labels: obj['x_values'],
        datasets: [{
          label: obj['series_name'],
          data: obj['y_values']
        }]
      },
      options: {
        title: {
          display: true,
          text: obj['chart_title'],
        },
        scales: {
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: obj['series_name']
            },
            ticks: {
              userCallback: function(value, index, values) {
                if (parseInt(value) &lt; 1000) {
                  return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&amp;,');
                } else {
                  // https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
              }
            }
          }],
          xAxes: [{
            beginAtZero: false,
            display: true,
            gridLines: false,
            ticks: {
              autoSkip: true,
              maxTicksLimit: 12
            },
            color: 'black'
          }]
        },
        showLines: true
      }
    })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col" id="graph1"&gt;
          &lt;canvas width="100" height="100" id="chart1"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My code is in the <a href="https://jsfiddle.net/vzcs1m0u" rel="nofollow noreferrer">JS Fiddle</a></p>