CODEWITHSUNDEEP
javascriptchart.js
j4nw
j4nw

Reputation: 2405

How to offset axes in a scatter plot?

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>

Upvotes: 6

Views: 620

Answers (1)

A. M.
A. M.

Reputation: 394

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>

Upvotes: 1

Related Questions