How to offset axes in a scatter plot?

Question

I want a little extra space around my data points in a scatter plot, between the extremum points and the axis.

Chart.js documentation lists the supposedly common offset property which sounds exactly like what I want, but it seems to only work for the horizontal labeled axis (first half of the snippet). It does nothing whatsoever for a scatter plot (second half).

Am I doing something wrong, or is this simply unsupported? What can I do as a workaround?

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

ctx = document.getElementById('chart1').getContext('2d');
new Chart(ctx, options);

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

ctx = document.getElementById('chart2').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

score 1 · Answer 1 · answered Jul 17 '19 at 14:34

I'm not sure about the offset working as you expect. Note that even on the first graph, the yaxis is not doing that padding.

I'd look into suggestedMin and suggestedMax as shown below:

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

ctx = document.getElementById('chart1').getContext('2d');
new Chart(ctx, options);

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 3
        }
    }],
      yAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 2
        }
    }]
    }
  }
}

ctx = document.getElementById('chart2').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

How to offset axes in a scatter plot?

1 Answers1