Fix onclick on step chart - #489

c3.js

@@ -2119,6 +2119,10 @@
                 if ($$.dragging) { return; } // do nothing when dragging
                 if ($$.hasArcType()) { return; }
 
+                if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                    index -= 1;
+                }
+
                 // Show tooltip
                 selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) {
                     return $$.addName($$.getValueOnIndex(t.values, index));
@@ -2175,6 +2179,9 @@
                     $$.cancelClick = false;
                     return;
                 }
+                if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                    index -= 1;
+                }
                 $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
                     $$.toggleShape(this, d, index);
                 });
@@ -4672,8 +4679,14 @@
         var $$ = this, d3 = $$.d3, config = $$.config,
             shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
         if (that.nodeName === 'circle') {
-            isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+            if ($$.isStepType(d)) {
-            toggle = $$.togglePoint;
+                // circle is hidden in step chart, so treat as within the click area
+                isWithin = true;
+                toggle = function () {}; // TODO: how to select step chart?
+            } else {
+                isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+                toggle = $$.togglePoint;
+            }
         }
         else if (that.nodeName === 'path') {
             if (shape.classed(CLASS.bar)) {

htdocs/samples/chart_step.html

@@ -17,7 +17,8 @@
           types: {
             data1: 'step',
             data2: 'area-step'
-          }
+          },
+          onclick: function (d) { console.log('clicked', d); }
         },
         subchart: {
           show: true

src/interaction.js

@@ -144,6 +144,10 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
             if ($$.dragging) { return; } // do nothing when dragging
             if ($$.hasArcType()) { return; }
 
+            if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                index -= 1;
+            }
+
             // Show tooltip
             selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) {
                 return $$.addName($$.getValueOnIndex(t.values, index));
@@ -200,6 +204,9 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
                 $$.cancelClick = false;
                 return;
             }
+            if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                index -= 1;
+            }
             $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
                 $$.toggleShape(this, d, index);
             });

src/selection.js

@@ -54,8 +54,14 @@ c3_chart_internal_fn.toggleShape = function (that, d, i) {
     var $$ = this, d3 = $$.d3, config = $$.config,
         shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
     if (that.nodeName === 'circle') {
-        isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+        if ($$.isStepType(d)) {
-        toggle = $$.togglePoint;
+            // circle is hidden in step chart, so treat as within the click area
+            isWithin = true;
+            toggle = function () {}; // TODO: how to select step chart?
+        } else {
+            isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+            toggle = $$.togglePoint;
+        }
     }
     else if (that.nodeName === 'path') {
         if (shape.classed(CLASS.bar)) {