[Chartjs]-Is it possible to have a decimal X axis for a line graph?

by

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.

Leave a comment