Sudhakar, Hemanth | Added a config called 'sensitivity' for the point so that click sensitivity can be configured.

Right now, the click area of a point is hard coded in the code and in high pixel density devices (iPad) this is not enough. Have modified the data.js (c3_chart_internal_fn.dist) function to calculate the distance between the two points and compare it with the configured value (which is passed to c3.generate method along with other config)

 Example

         point: {
             show: true,
             r: 5,
             sensitivity: 20
         },

c3.js

@@ -1158,6 +1158,7 @@
             // point - point of each data
             point_show: true,
             point_r: 2.5,
+            point_sensitivity: 10,
             point_focus_expand_enabled: true,
             point_focus_expand_r: undefined,
             point_select_r: undefined,
@@ -1875,7 +1876,7 @@
         return $$.findClosest(candidates, pos);
     };
     c3_chart_internal_fn.findClosest = function (values, pos) {
-        var $$ = this, minDist = 100, closest;
+        var $$ = this, minDist = $$.config.point_sensitivity, closest;
 
         // find mouseovering bar
         values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) {
@@ -1902,7 +1903,7 @@
             yIndex = config.axis_rotated ? 0 : 1,
             y = $$.circleY(data, data.index),
             x = $$.x(data.x);
-        return Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2);
+        return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2));
     };
     c3_chart_internal_fn.convertValuesToStep = function (values) {
         var converted = [].concat(values), i;
@@ -2514,7 +2515,7 @@
                 $$.showXGridFocus(selectedData);
 
                 // Show cursor as pointer if point is close to mouse position
-                if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
+                if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
                     $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
                     if (!$$.mouseover) {
                         config.data_onmouseover.call($$.api, closest);
@@ -2525,16 +2526,13 @@
             .on('click', function () {
                 var targetsToShow = $$.filterTargetsToShow($$.data.targets);
                 var mouse, closest;
-
                 if ($$.hasArcType(targetsToShow)) { return; }
 
                 mouse = d3.mouse(this);
                 closest = $$.findClosestFromTargets(targetsToShow, mouse);
-
                 if (! closest) { return; }
-
                 // select if selection enabled
-                if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
+                if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
                     $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
                         if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
                             $$.toggleShape(this, closest, closest.index);

src/config.js

@@ -144,6 +144,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         // point - point of each data
         point_show: true,
         point_r: 2.5,
+        point_sensitivity: 10,
         point_focus_expand_enabled: true,
         point_focus_expand_r: undefined,
         point_select_r: undefined,

src/data.js

@@ -305,7 +305,7 @@ c3_chart_internal_fn.findClosestFromTargets = function (targets, pos) {
     return $$.findClosest(candidates, pos);
 };
 c3_chart_internal_fn.findClosest = function (values, pos) {
-    var $$ = this, minDist = 100, closest;
+    var $$ = this, minDist = $$.config.point_sensitivity, closest;
 
     // find mouseovering bar
     values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) {
@@ -332,7 +332,7 @@ c3_chart_internal_fn.dist = function (data, pos) {
         yIndex = config.axis_rotated ? 0 : 1,
         y = $$.circleY(data, data.index),
         x = $$.x(data.x);
-    return Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2);
+    return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2));
 };
 c3_chart_internal_fn.convertValuesToStep = function (values) {
     var converted = [].concat(values), i;

src/interaction.js

@@ -288,7 +288,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
             $$.showXGridFocus(selectedData);
 
             // Show cursor as pointer if point is close to mouse position
-            if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
+            if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
                 $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
                 if (!$$.mouseover) {
                     config.data_onmouseover.call($$.api, closest);
@@ -299,16 +299,13 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
         .on('click', function () {
             var targetsToShow = $$.filterTargetsToShow($$.data.targets);
             var mouse, closest;
-
             if ($$.hasArcType(targetsToShow)) { return; }
 
             mouse = d3.mouse(this);
             closest = $$.findClosestFromTargets(targetsToShow, mouse);
-
             if (! closest) { return; }
-
             // select if selection enabled
-            if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
+            if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) {
                 $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () {
                     if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
                         $$.toggleShape(this, closest, closest.index);