Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 556
j4nw Avatar asked Jul 15 '19 13:07

j4nw


1 Answers

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>
like image 158
A. M. Avatar answered Oct 11 '22 17:10

A. M.