[Chartjs]-Chart JS Logarithmic x-axis

by

1👍

✅

If both axes are numeric the data needs to be provided as an array of points, i.e.:

[ { x: 111, y: 222 }, ... ]

From the documentation:

This alternate is used for sparse datasets, such as those in scatter charts. Each data point is specified using an object containing x and y properties.

Here’s a working example from the posted code:

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'red',
      borderColor: 'red',
      fill: false,
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 4 },
        { x: 5, y: 5 },
        { x: 6, y: 6 },
        { x: 7, y: 7 },
        { x: 8, y: 8 },
        { x: 9, y: 9 },
        { x: 10, y: 10 },
        { x: 11, y: 11 },
        { x: 12, y: 12 },
        { x: 13, y: 13 },
        { x: 14, y: 14 },
        { x: 15, y: 15 }
      ]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart - Logarithmic'
    },
    scales: {
      xAxes: [{
        type: 'logarithmic'
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('canvas');
  window.myLine = new Chart(ctx, config);
};
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment