C3.js bubble chart selection

Question

I created bubble chart using modified points :

var chart = c3.generate({
point: {
   r: 80,
   focus: {
        expand: {
             enabled: false
         }
    },
},
data: {
     columns: [
      ["data", 1.4, 2.5, 1.5],
    ],
type: 'scatter'
},
});

But when i like to select the bubble, i need to point the center of the bubble. How can I enforce the selection for the entire bubble?

Answer 1

There's an undocumented feature for the point chart that allows you to set the point sensitivity (which should be the same as the radius value:

var chart = c3.generate({
  point: {
    r: 100,
    sensitivity: 100, // This is the key here.
    focus: {
      expand: {
        enabled: false
      }
    },
  },
  data: {
    columns: [
      ["data", 1.4, 2.5, 1.5],
    ],
    type: 'scatter'
  }
});

<link href="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="chart"></div>

TBTH the sensitivity value should likely be the same as the radius by default. I've created an issue as such.