How to have chart.js automatically build x-axis labels based on x,y dataset?

Question

Is there a way to have chart.js automatically display the range of labels that best fit and X,Y dataset?

I have a simple dataset that is zero based but with unequally spaced data, ala:

 0.0, 7.0
 0.5, 8.0
 1.2, 9.0
 ...
 49.9 213.0

Is there a way to pass this dataset into chart.js and have it do the right thing and compute, say, 10 labels from 0 -> 50.0 and display all of the datapoints connected by a line?

Answer 1

Edit: Below Accepted version no longer works above version ^2.7.

• For latest version 2.9 scatter series no longer display lines. So you need to use Line series with linear scale. So your options would like be below:

 var randomColor = function(opacity) {
   return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
 };

 var scatterChartData = {
   datasets: [{
     label: "My First dataset",
     fill: false,
     lineTension: 0,
     borderWidth: 3,
     data: [{
        x: 0.328,
        y: 0.2
      },{
        x: 0.328,
        y: 1.0
      },
      {
        x: -0.328,
        y: 1.0
      },
      {
        x: -0.328,
        y: 0.2
      },
      {
        x: 0.0,
        y: 0.0
      },
      ]
   }]
 };

 $.each(scatterChartData.datasets, function(i, dataset) {
   dataset.borderColor = randomColor(0.4);
   dataset.backgroundColor = randomColor(0.1);
   dataset.pointBorderColor = randomColor(0.7);
   dataset.pointBackgroundColor = randomColor(0.5);
   dataset.pointBorderWidth = 1;
 });

 window.onload = function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myScatter = Chart.Line(ctx, {
     data: scatterChartData,
     options: {
       title: {
         display: true,
         text: 'Chart.js Scatter Chart'
       },
       scales: {
         xAxes: [{
           type: 'linear',
           position: 'top',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'x axis'
           }
         }],
         yAxes: [{
           type: 'linear',
           position: 'right',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'y axis'
           }
         }]
       }
     }
   });
 };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<div style="width:75%">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

• From 2.1.3 to 2.7 you need to use showLines: true in your options object in the original answer.

Original answer:

This is possible out of the box with chart.js 2.x using the ability to pass x and y attributes with the data.

Here is an exmaple taken from the chart.js examples

var randomScalingFactor = function() {
   return Math.round(Math.random() * 10);
 };
 var randomColor = function(opacity) {
   return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
 };

 var scatterChartData = {
   datasets: [{
     label: "My First dataset",
     data: [{
       x: 0.4,
       y: randomScalingFactor(),
     }, {
       x: 1.6,
       y: randomScalingFactor(),
     }, {
       x: 4.7,
       y: randomScalingFactor(),
     }, {
       x: 9.2,
       y: randomScalingFactor(),
     }, {
       x: 20.1,
       y: randomScalingFactor(),
     }, {
       x: 44.5,
       y: randomScalingFactor(),
     }, {
       x: 155.3,
       y: randomScalingFactor(),
     }]
   }]
 };

 $.each(scatterChartData.datasets, function(i, dataset) {
   dataset.borderColor = randomColor(0.4);
   dataset.backgroundColor = randomColor(0.1);
   dataset.pointBorderColor = randomColor(0.7);
   dataset.pointBackgroundColor = randomColor(0.5);
   dataset.pointBorderWidth = 1;
 });

 window.onload = function() {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myScatter = Chart.Scatter(ctx, {
     data: scatterChartData,
     options: {
       title: {
         display: true,
         text: 'Chart.js Scatter Chart'
       },
       scales: {
         xAxes: [{
           position: 'bottom',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'x axis'
           }
         }],
         yAxes: [{
           position: 'left',
           gridLines: {
             zeroLineColor: "rgba(0,255,0,1)"
           },
           scaleLabel: {
             display: true,
             labelString: 'y axis'
           }
         }]
       }
     }
   });
 };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<div style="width:75%">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>