title: How to fix the distance between horizontal points (x-axis) in chartJS
body: <p><strong>Problem:</strong> Hi all! i am using chart.js to draw the charts. chart is a dynamic sometimes shows 10 points and sometimes can be more than thousand i have applied a panel successfully so that my points can be shown at some distance to read them easily. </p>
  
  <p>Right now i want to know if there is any option to set the distance between points in x-axis grid. right now it automatically adjust the points. </p>
  
  <p><strong>What i tried:</strong>
  i tried to do the stepsize and scalewidth by searching other stackoverflow answers but did not succeed. Any kind of help would be much appreciated.</p>
  
  <p>P.S:  i m using chart.js2</p>
  
  <p>This is my chartjs dataset</p>
  
  <pre><code>var data = {
      labels: data.graph_date,
      datasets: [
          {
              label: 'Assay Values',
              fill: false,
              lineTension: 0,
              backgroundColor: "rgba(255, 0, 0,1)",
              borderColor: "rgba(255, 0, 0,1)",
              borderCapStyle: 'butt',
              borderDash: [],
              borderDashOffset: 0.0,
              borderWidth: 1,
              borderJoinStyle: 'miter',
              pointBorderColor: "rgba(255, 0, 0,1)",
              pointBackgroundColor: "#fff",
              pointBorderWidth: 1,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
              pointHoverBorderColor: "rgba(255, 0, 0,1)",
              pointHoverBorderWidth: 2,
              pointRadius: 1,
              pointHitRadius: 10,
              data: data.assay_value,
              spanGaps: false
          },var options = {
      responsive: false,
      title: {
          display: true,
          position: "top",
          text: label,
          fontSize: 18,
          fontColor: "#111"
      },
      legend: {
          display: true,
          position: "bottom",
          labels: {
              fontColor: "#333",
              fontSize: 16
          }
      },
      tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
              label: function(tooltipItems, data) {
                  var multistringText = ['Assay Value: '+tooltipItems.yLabel];
                  multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
                  multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
                  return multistringText;
              }
          }
      },
      scales:{
          yAxes:[{
              ticks:{
                  min:graph_min
              }
          }],
          xAxes: [{
              gridLines: {
                  display:false
              }
          }]
      }
  };
  if(new_chart[ctx.canvas.id] != null)
      new_chart[ctx.canvas.id].destroy();
  
  new_chart[ctx.canvas.id] =new Chart(ctx, {
      type: 'line',
      data: data,
      options: options
  });
  </code></pre>
  
  <p>In x-axis there is data like this </p>
  
  <pre><code>[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]
  </code></pre>
  
  <p>in y-axis data is like this </p>
  
  <pre><code>[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]
  </code></pre>