Bubble getting cut off in Chart.js

Question

I'm having an issue where the last bubble in my chart cuts off. I need a way of extending the chart so that the entire circle is displayed. I've tried everything from adding an extra value to the end, to adjusting padding. Nothing seems to work. Unfortunately, the Chart JS documention on bubble charts is severely lacking as well.

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
  return Math.round(Math.random() * 255);
};
var randomColor = function() {
  return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};

var bubbleChartData = {
  animation: {
    duration: 10000
  },
  datasets: [{
    label: "My First dataset",
    backgroundColor: randomColor(),
    data: [
      {
        x: 10,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 20,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 30,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 40,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 50,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 60,
        y: 0,
        r: Math.abs(randomScalingFactor()) / 5,
      }, {
        x: 70,
        y: 0,
        r: 30,
      }]
  }]
};

var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bubble',
  data: bubbleChartData
})

JSFiddle: https://jsfiddle.net/3dog0bec/

Answer 1

I solved this issue by modifying the xAxes ticks min and max. This worked because I have a set number of data to display, so I simply set the values to 10 less than the first data point and 10 more than the last.

var chart = new Chart(ctx, {
        type: 'bubble',
        data: bubbleChartData,
        options: {
            scales: {
                xAxes: [
                {
                    ticks: {
                        min: -10,
                        max: 100
                    }
                }]
            }
        }
    });