Fix this context for mouse events

c3.js

@@ -2271,7 +2271,7 @@
 
                 // Call event handler
                 $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                    config.data_onmouseover.call($$, d);
+                    config.data_onmouseover.call($$.api, d);
                 });
             })
             .on('mouseout', function (d) {
@@ -2284,7 +2284,7 @@
                 $$.unexpandBars();
                 // Call event handler
                 $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                    config.data_onmouseout.call($$, d);
+                    config.data_onmouseout.call($$.api, d);
                 });
             })
             .on('mousemove', function (d) {
@@ -2399,7 +2399,7 @@
                 closest = $$.findClosestFromTargets(targetsToShow, mouse);
 
                 if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id)) {
-                    config.data_onmouseout.call($$, $$.mouseover);
+                    config.data_onmouseout.call($$.api, $$.mouseover);
                     $$.mouseover = undefined;
                 }
 
@@ -2433,7 +2433,7 @@
                 if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
                     $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
                     if (!$$.mouseover) {
-                        config.data_onmouseover.call($$, closest);
+                        config.data_onmouseover.call($$.api, closest);
                         $$.mouseover = closest;
                     }
                 }
@@ -4949,7 +4949,7 @@
             .attr('class', CLASS.dragarea)
             .style('opacity', 0.1);
         $$.dragging = true;
-        $$.config.data_ondragstart();
+        $$.config.data_ondragstart.call($$.api);
     };
 
     c3_chart_internal_fn.dragend = function () {
@@ -4963,7 +4963,7 @@
         $$.main.selectAll('.' + CLASS.shape)
             .classed(CLASS.INCLUDED, false);
         $$.dragging = false;
-        $$.config.data_ondragend();
+        $$.config.data_ondragend.call($$.api);
     };
 
 

src/drag.js

@@ -65,7 +65,7 @@ c3_chart_internal_fn.dragstart = function (mouse) {
         .attr('class', CLASS.dragarea)
         .style('opacity', 0.1);
     $$.dragging = true;
-    $$.config.data_ondragstart();
+    $$.config.data_ondragstart.call($$.api);
 };
 
 c3_chart_internal_fn.dragend = function () {
@@ -79,6 +79,6 @@ c3_chart_internal_fn.dragend = function () {
     $$.main.selectAll('.' + CLASS.shape)
         .classed(CLASS.INCLUDED, false);
     $$.dragging = false;
-    $$.config.data_ondragend();
+    $$.config.data_ondragend.call($$.api);
 };
 

src/interaction.js

@@ -142,7 +142,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
 
             // Call event handler
             $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                config.data_onmouseover.call($$, d);
+                config.data_onmouseover.call($$.api, d);
             });
         })
         .on('mouseout', function (d) {
@@ -155,7 +155,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
             $$.unexpandBars();
             // Call event handler
             $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
-                config.data_onmouseout.call($$, d);
+                config.data_onmouseout.call($$.api, d);
             });
         })
         .on('mousemove', function (d) {
@@ -270,7 +270,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
             closest = $$.findClosestFromTargets(targetsToShow, mouse);
 
             if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id)) {
-                config.data_onmouseout.call($$, $$.mouseover);
+                config.data_onmouseout.call($$.api, $$.mouseover);
                 $$.mouseover = undefined;
             }
 
@@ -304,7 +304,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
             if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
                 $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
                 if (!$$.mouseover) {
-                    config.data_onmouseover.call($$, closest);
+                    config.data_onmouseover.call($$.api, closest);
                     $$.mouseover = closest;
                 }
             }