Fixed the areaOnSub IIFE. Implemented it on the subchart.

c3.js

@@ -2221,7 +2221,7 @@
                     isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
                     return area(data);
                 } else if (hasType([d], 'area-step')) {
-                    isStepType(d) ? area.interpolate("step-after") : '';
+                    isStepType(d) ? area.interpolate("step-after") : area.interpolate("linear");
                     return area(data);
                 } else {
                     x0 = x(data[0].x);
@@ -2401,7 +2401,34 @@
                 .y(__axis_rotated ? subxx : function (d) { return getSubYScale(d.id)(d.value); });
             return function (d) {
                 var data = filterRemoveNull(d.values);
-                return isLineType(d) ? line(data) : "M " + subX(data[0].x) + " " + getSubYScale(d.id)(data[0].value);
+                if (isLineType(d)) {
+                  return line(data);
+                } else if (isStepType(d)) {
+                  line.interpolate("step-after");
+                  return line(data);
+                } else {
+                  return "M " + subX(data[0].x) + " " + getSubYScale(d.id)(data[0].value);
+                }
+            };
+        })();
+        var areaOnSub = (function () {
+            var area = d3.svg.area()
+                .x(xx)
+                .y0(function (d, i) { return getSubYScale(d.id)(0); })
+                .y1(function (d, i) { return getSubYScale(d.id)(d.value); });
+            return function (d) {
+                var data = filterRemoveNull(d.values), x0, y0;
+                if (hasType([d], 'area') || hasType([d], 'area-spline')) {
+                  isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
+                  return area(data);
+                } else if (hasType([d], 'area-step')) {
+                  isStepType(d) ? area.interpolate("step-after") : area.interpolate("linear");
+                  return area(data);
+                } else {
+                  x0 = subX(data[0].x);
+                  y0 = getSubYScale(d.id)(data[0].value);
+                  return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
+                }
             };
         })();
 
@@ -3328,12 +3355,14 @@
 //                .attr("d", lineOnMain)
                 .attr("d", drawLine)
                 .style("opacity", 1);
+            // steps
             main.selectAll('.' + CLASS.step)
                 .style("opacity", initialOpacity)
               .transition().duration(duration)
 //                .attr("d", lineOnMain)
                 .attr("d", drawLine)
                 .style("opacity", 1);
+            // area
             main.selectAll('.' + CLASS.area)
                 .style("opacity", 0)
               .transition().duration(duration)
@@ -3425,11 +3454,18 @@
                       .transition().duration(duration)
                         .attr("d", lineOnSub)
                         .style('opacity', 1);
+                    // steps
                     context.selectAll('.' + CLASS.step)
                         .style("opacity", initialOpacity)
                       .transition().duration(duration)
                         .attr("d", lineOnSub)
                         .style('opacity', 1);
+                    // area
+                    context.selectAll('.' + CLASS.area)
+                        .style("opacity", initialOpacity)
+                      .transition().duration(duration)
+                        .attr("d", areaOnSub)
+                        .style('opacity', orgAreaOpacity);
                 }
             }
 
@@ -3623,6 +3659,7 @@
                 .attr("class", classLine)
                 .style("opacity", 0)
                 .style("stroke", function (d) { return color(d.id); });
+            // Steps
             mainLineEnter.append("path")
                 .attr('class', classStep)
                 .style("opacity", 0)
@@ -3630,7 +3667,7 @@
             // Areas
             mainLineEnter.append("path")
                 .attr("class", classArea)
-                .style("opacity", function () { orgAreaOpacity = (__color_opacity) ? __color_opacity : 1; return 0; })//+d3.select(this).style('opacity'); return 0; })
+                .style("opacity", function () { orgAreaOpacity = (__color_opacity) ? __color_opacity : 1; return orgAreaOpacity; })//+d3.select(this).style('opacity'); return 0; })
                 .style("fill", function (d) { return color(d.id); });
             // Circles for each data point on lines
             mainLineEnter.append('g')
@@ -3713,7 +3750,17 @@
                 contextLineEnter.append("path")
                     .attr("class", classLine)
                     .style("opacity", 0)
+                    .style("stroke", function (d) { return color(d.id); })
+                // Steps
+                contextLineEnter.append("path")
+                    .attr("class", classStep)
+                    .style("opacity", 0)
                     .style("stroke", function (d) { return color(d.id); });
+                // Area
+                contextLineEnter.append("path")
+                    .attr("class", classArea)
+                    .style("opacity", orgAreaOpacity)
+                    .style("fill", function (d) { return color(d.id); });
             }
 
             /*-- Show --*/