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

by

7👍

✅

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>

1👍

For 3.8, the above answer again is outdated :/

You need this option for a line chart with linear X axis:

options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }

If you add that to the example at https://www.chartjs.org/docs/3.8.0/charts/line.html (just below data: data,) then it will build a linear X axis. Because the default chart uses month names, to make it work properly you should open the "Setup" tab and change the labels to something like:

const labels = [1, 2, 3, 14, 15, 16, 17];

The X axis should now interpolate between the 3 and 14, leaving a large gap between data points:

Leave a comment