Is it possible to have a decimal X axis for a line graph?

Question

https://jsfiddle.net/8Loj8vbo/2/

Here's the chart javascript:

 $(document).ready(function() {

  var ctx = document.getElementById("rpm2-graph")
  var rpm2Chart = new Chart(ctx, {
    type: "line",
    options: {
      maintainAspectRatio: false
    },
    data: {
      datasets: [{
        "label": "RPM",
        "data": [{
          "x": 182.843,
          "y": 5988.867
        }, {
          "x": 182.852,
          "y": 5993.022
        }, {
          "x": 182.863,
          "y": 5992.126
        }, {
          "x": 182.873,
          "y": 5994.637
        }, {
          "x": 182.882,
          "y": 5998.02
        }, {
          "x": 182.893,
          "y": 6000.957
        }, {
          "x": 182.903,
          "y": 6003.547
        }, {
          "x": 182.912,
          "y": 6006.355
        }, {
          "x": 182.923,
          "y": 6011.133
        }]
      }]
    }
  });
});

There are 9 data points in the set, but Chart is only showing the first two. It doesn't appear to be a scale issue, as the width of the canvas looks appropriate.

It just seems like Chart is unwilling to draw the extra points, and I'm not sure why. Is it possibly because the x values are not integers?

My x axis is time data (eg: seconds and fractions of a second).

Answer 1

Line chart doesn't quite support numerical values for x-axis. You should rather use scatter chart.

Here is the example :

$(document).ready(function() {
   var ctx = document.getElementById("rpm2-graph")
   var rpm2Chart = new Chart(ctx, {
      type: "scatter",
      options: {
         maintainAspectRatio: false
      },
      data: {
         datasets: [{
            "label": "RPM",
            "data": [{
               "x": 182.843,
               "y": 5988.867
            }, {
               "x": 182.852,
               "y": 5993.022
            }, {
               "x": 182.863,
               "y": 5992.126
            }, {
               "x": 182.873,
               "y": 5994.637
            }, {
               "x": 182.882,
               "y": 5998.02
            }, {
               "x": 182.893,
               "y": 6000.957
            }, {
               "x": 182.903,
               "y": 6003.547
            }, {
               "x": 182.912,
               "y": 6006.355
            }, {
               "x": 182.923,
               "y": 6011.133
            }]
         }]
      }
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line-graph">
   <canvas id="rpm2-graph" height="400"></canvas>
</div>

Refer here to learn more about scatter chart.