Merge branch 'master' of https://github.com/masayuki0812/c3 into domain

Conflicts: c3.js c3.min.js src/config.js
10 years ago · 43b3eb7672
32 changed files with 1002 additions and 135 deletions
--- a/README.md
+++ b/README.md
@ -3,24 +3,24 @@ c3 [![Build Status](https://travis-ci.org/masayuki0812/c3.svg?branch=master)](ht

 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.

-More information is here: [http://c3js.org](http://c3js.org/)
+Follow the link for more information: [http://c3js.org](http://c3js.org/)

 ## Tutorial and Examples

 + [Getting Started](http://c3js.org/gettingstarted.html)
 + [Examples](http://c3js.org/examples.html)

-Another samples are included in this repository:
+Additional samples can be found in this repository:
 + [https://github.com/masayuki0812/c3/tree/master/htdocs/samples](https://github.com/masayuki0812/c3/tree/master/htdocs/samples)

-And you can run these samples as:
+You can run these samples as:
 ```
 $ cd c3/htdocs
 $ python -m SimpleHTTPServer 8080
 ```

 ## Forum
-Now you can ask anything in this forum:
+Discuss anything in this forum:
 + [https://groups.google.com/forum/#!forum/c3js](https://groups.google.com/forum/#!forum/c3js)

 ## Playground
--- a/c3.css
+++ b/c3.css
@ -148,6 +148,9 @@

 /*-- Tooltip --*/

+.c3-tooltip-container {
+  z-index: 10;
+}
 .c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
--- a/c3.js
+++ b/c3.js
@ -549,7 +549,7 @@
        // lines, areas and cricles
        $$.redrawLine(durationForExit);
        $$.redrawArea(durationForExit);
-        if (config.point_show) { $$.redrawCircle(); }
+        $$.redrawCircle();

        // text
        if ($$.hasDataLabel()) {
@ -582,7 +582,7 @@
            $$.addTransitionForBar(transitions, drawBar);
            $$.addTransitionForLine(transitions, drawLine);
            $$.addTransitionForArea(transitions, drawArea);
-            if (config.point_show) { $$.addTransitionForCircle(transitions, cx, cy); }
+            $$.addTransitionForCircle(transitions, cx, cy);
            $$.addTransitionForText(transitions, xForText, yForText, options.flow);
            $$.addTransitionForRegion(transitions);
            $$.addTransitionForGrid(transitions);
@ -689,7 +689,7 @@
        return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0;
    };
    c3_chart_internal_fn.opacityForCircle = function (d) {
-        return isValue(d.value) ? this.isScatterType(d) ? 0.5 : 1 : 0;
+        return isValue(d.value) && this.config.point_show ? (this.isScatterType(d) ? 0.5 : 1) : 0;
    };
    c3_chart_internal_fn.opacityForText = function () {
        return this.hasDataLabel() ? 1 : 0;
@ -890,6 +890,8 @@
            zoom_extent: undefined,
            zoom_privileged: false,
            zoom_onzoom: function () {},
+            zoom_onzoomstart: function () {},
+            zoom_onzoomend: function () {},
            zoom_x_min: undefined,
            zoom_x_max: undefined,
            interaction_enabled: true,
@ -1015,7 +1017,9 @@
            point_focus_expand_enabled: true,
            point_focus_expand_r: undefined,
            point_select_r: undefined,
+            // line
            line_connectNull: false,
+            line_step_type: 'step',
            // bar
            bar_width: undefined,
            bar_width_ratio: 0.6,
@ -1259,6 +1263,15 @@
            isZeroBased = ($$.hasType('bar', yTargets) && config.bar_zerobased) || ($$.hasType('area', yTargets) && config.area_zerobased),
            showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated,
            showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated;
+
+        if (yDomainMax < yDomainMin) {
+            if (isValue(yMin)) {
+                yDomainMax = yDomainMin + 10; // TODO: introduce axis.y.maxMin
+            } else {
+                yDomainMin = yDomainMax - 10; // TODO: introduce axis.y.minMax
+            }
+        }
+
        if (yTargets.length === 0) { // use current domain if target of axisId is none
            return axisId === 'y2' ? $$.y2.domain() : $$.y.domain();
        }
@ -1576,8 +1589,8 @@
    };
    c3_chart_internal_fn.mapTargetsToUniqueXs = function (targets) {
        var $$ = this;
-        var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return v.x; }); }))).values();
-        return $$.isTimeSeries() ? xs.map(function (x) { return new Date(x); }) : xs.map(function (x) { return +x; });
+        var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return +v.x; }); }))).values();
+        return $$.isTimeSeries() ? xs.map(function (x) { return new Date(+x); }) : xs.map(function (x) { return +x; });
    };
    c3_chart_internal_fn.addHiddenTargetIds = function (targetIds) {
        this.hiddenTargetIds = this.hiddenTargetIds.concat(targetIds);
@ -1621,11 +1634,11 @@
    };
    c3_chart_internal_fn.isOrderDesc = function () {
        var config = this.config;
-        return config.data_order && config.data_order.toLowerCase() === 'desc';
+        return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'desc';
    };
    c3_chart_internal_fn.isOrderAsc = function () {
        var config = this.config;
-        return config.data_order && config.data_order.toLowerCase() === 'asc';
+        return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'asc';
    };
    c3_chart_internal_fn.orderTargets = function (targets) {
        var $$ = this, config = $$.config, orderAsc = $$.isOrderAsc(), orderDesc = $$.isOrderDesc();
@ -2061,27 +2074,30 @@
        else {
            if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
                rectW = function (d) {
-                    var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index],
-                        w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
+                    var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);

                    // if there this is a single data point make the eventRect full width (or height)
                    if (prevX === null && nextX === null) {
                        return config.axis_rotated ? $$.height : $$.width;
                    }
-                    else {
-                        return w < 0 ? 0 : w;
-                    }
+
+                    if (prevX === null) { prevX = $$.x.domain()[0]; }
+                    if (nextX === null) { nextX = $$.x.domain()[1]; }
+
+                    return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2);
                };
                rectX = function (d) {
-                    var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index];
-                    
+                    var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index),
+                        thisX = $$.data.xs[d.id][d.index];
+
                    // if there this is a single data point position the eventRect at 0
                    if (prevX === null && nextX === null) {
                        return 0;
                    }
-                    else {
-                        return ($$.x(dx) + $$.x(prevX ? prevX : dx)) / 2;
-                    }
+
+                    if (prevX === null) { prevX = $$.x.domain()[0]; }
+
+                    return ($$.x(thisX) + $$.x(prevX)) / 2;
                };
            } else {
                rectW = $$.getEventRectWidth();
@ -2159,7 +2175,7 @@
                if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
                if ($$.hasArcType()) { return; }

-                if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                if ($$.isStepType(d) && $$.config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
                    index -= 1;
                }

@ -2193,12 +2209,7 @@
                        }
                    })
                    .filter(function (d) {
-                        if (this.nodeName === 'circle') {
-                            return $$.isWithinCircle(this, $$.pointSelectR(d));
-                        }
-                        else if (this.nodeName === 'path') {
-                            return $$.isWithinBar(this);
-                        }
+                        return $$.isWithinShape(this, d);
                    })
                    .each(function (d) {
                        if (config.data_selection_enabled && (config.data_selection_grouped || config.data_selection_isselectable(d))) {
@ -2219,7 +2230,7 @@
                    $$.cancelClick = false;
                    return;
                }
-                if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+                if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
                    index -= 1;
                }
                $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
@ -2417,7 +2428,7 @@
    };
    c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
        var $$ = this, config = $$.config;
-        if (axisId === 'x' && !config.axis_x_show) { return 0; }
+        if (axisId === 'x' && !config.axis_x_show) { return 8; }
        if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
        if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
        if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
@ -2493,9 +2504,11 @@
    c3_chart_internal_fn.isWithinShape = function (that, d) {
        var $$ = this,
            shape = $$.d3.select(that), isWithin;
-        if (that.nodeName === 'circle') {
-            // circle is hidden in step chart, so treat as within the click area
-            isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+        if (!$$.isTargetToShow(d.id)) {
+            isWithin = false;
+        }
+        else if (that.nodeName === 'circle') {
+            isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScale(d.id)(d.value)) : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
        }
        else if (that.nodeName === 'path') {
            isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
@ -2506,7 +2519,7 @@

    c3_chart_internal_fn.getInterpolate = function (d) {
        var $$ = this;
-        return $$.isSplineType(d) ? "cardinal" : $$.isStepType(d) ? "step-after" : "linear";
+        return $$.isSplineType(d) ? "cardinal" : $$.isStepType(d) ? $$.config.line_step_type : "linear";
    };

    c3_chart_internal_fn.initLine = function () {
@ -2559,6 +2572,7 @@
            .style("stroke", $$.color);
        $$.mainLine
            .style("opacity", $$.initialOpacity.bind($$))
+            .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
            .attr('transform', null);
        $$.mainLine.exit().transition().duration(durationForExit)
            .style('opacity', 0)
@ -2840,7 +2854,7 @@
    };
    c3_chart_internal_fn.pointR = function (d) {
        var $$ = this, config = $$.config;
-        return config.point_show && !$$.isStepType(d) ? (isFunction(config.point_r) ? config.point_r(d) : config.point_r) : 0;
+        return $$.isStepType(d) ? 0 : (isFunction(config.point_r) ? config.point_r(d) : config.point_r);
    };
    c3_chart_internal_fn.pointExpandedR = function (d) {
        var $$ = this, config = $$.config;
@ -2850,11 +2864,14 @@
        var $$ = this, config = $$.config;
        return config.point_select_r ? config.point_select_r : $$.pointR(d) * 4;
    };
-    c3_chart_internal_fn.isWithinCircle = function (_this, _r) {
+    c3_chart_internal_fn.isWithinCircle = function (that, r) {
        var d3 = this.d3,
-            mouse = d3.mouse(_this), d3_this = d3.select(_this),
-            cx = d3_this.attr("cx") * 1, cy = d3_this.attr("cy") * 1;
-        return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < _r;
+            mouse = d3.mouse(that), d3_this = d3.select(that),
+            cx = +d3_this.attr("cx"), cy = +d3_this.attr("cy");
+        return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < r;
+    };
+    c3_chart_internal_fn.isWithinStep = function (that, y) {
+        return Math.abs(y - this.d3.mouse(that)[1]) < 30;
    };

    c3_chart_internal_fn.initBar = function () {
@ -3085,11 +3102,19 @@
    };
    c3_chart_internal_fn.hasType = function (type, targets) {
        var $$ = this, types = $$.config.data_types, has = false;
-        (targets || $$.data.targets).forEach(function (t) {
-            if ((types[t.id] && types[t.id].indexOf(type) >= 0) || (!(t.id in types) && type === 'line')) {
-                has = true;
-            }
-        });
+        targets = targets || $$.data.targets;
+        if (targets.length) {
+            targets.forEach(function (target) {
+                var t = types[target.id];
+                if ((t && t.indexOf(type) >= 0) || (!t && type === 'line')) {
+                    has = true;
+                }
+            });
+        } else {
+            Object.keys(types).forEach(function (id) {
+                if (types[id] === type) { has = true; }
+            });
+        }
        return has;
    };
    c3_chart_internal_fn.hasArcType = function (targets) {
@ -3386,10 +3411,10 @@
        var $$ = this, config = $$.config, i;
        $$.tooltip = $$.selectChart
            .style("position", "relative")
-            .append("div")
+          .append("div")
+            .attr('class', CLASS.tooltipContainer)
            .style("position", "absolute")
            .style("pointer-events", "none")
-            .style("z-index", "10")
            .style("display", "none");
        // Show tooltip if needed
        if (config.tooltip_init_show) {
@ -3422,7 +3447,7 @@
                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
            }

-            name = nameFormat(d[i].name);
+            name = nameFormat(d[i].name, d[i].ratio, d[i].id, d[i].index);
            value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
            bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

@ -3523,12 +3548,10 @@
        return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
    };
    c3_chart_internal_fn.getLegendHeight = function () {
-        var $$ = this, config = $$.config, h = 0;
-        if (config.legend_show) {
+        var $$ = this, h = 0;
+        if ($$.config.legend_show) {
            if ($$.isLegendRight) {
                h = $$.currentHeight;
-            } else if ($$.isLegendInset) {
-                h = config.legend_inset_step ? Math.max(20, $$.legendItemHeight) * (config.legend_inset_step + 1) : $$.height;
            } else {
                h = Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1);
            }
@ -3659,6 +3682,11 @@
            }
        }

+        if ($$.isLegendInset) {
+            step = config.legend_inset_step ? config.legend_inset_step : targetIds.length;
+            $$.updateLegendStep(step);
+        }
+
        if ($$.isLegendRight) {
            xForLegend = function (id) { return maxWidth * steps[id]; };
            yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
@ -3736,7 +3764,7 @@
            $$.legend.insert('g', '.' + CLASS.legendItem)
                .attr("class", CLASS.legendBackground)
                .append('rect')
-                .attr('height', $$.getLegendHeight() - 10)
+                .attr('height', $$.getLegendHeight() - 12)
                .attr('width', maxWidth * (step + 1) + 10);
        }

@ -4060,7 +4088,7 @@
            $$.d3.select('body').append("g").style('visibility', 'hidden').call(axis).each(function () {
                $$.d3.select(this).selectAll('text').each(function () {
                    var box = this.getBoundingClientRect();
-                    if (maxWidth < box.width) { maxWidth = box.width; }
+                    if (box.left > 0 && maxWidth < box.width) { maxWidth = box.width; }
                });
            }).remove();
        }
@ -4151,7 +4179,8 @@
    };
    c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
        // axis line width + padding for left
-        return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);
+        var left = Math.max(30, this.margin.left);
+        return forHorizontal ? -(1 + left) : -(left - 1);
    };
    c3_chart_internal_fn.getAxisClipY = function (forHorizontal) {
        return forHorizontal ? -20 : -4;
@ -4173,9 +4202,11 @@
        return $$.getAxisClipY($$.config.axis_rotated);
    };
    c3_chart_internal_fn.getAxisClipWidth = function (forHorizontal) {
-        var $$ = this;
+        var $$ = this,
+            left = Math.max(30, $$.margin.left),
+            right = Math.max(30, $$.margin.right);
        // width + axis line width + padding for left/right
-        return forHorizontal ? $$.width + 2 + 30 + 30 : $$.margin.left + 20;
+        return forHorizontal ? $$.width + 2 + left + right : $$.margin.left + 20;
    };
    c3_chart_internal_fn.getAxisClipHeight = function (forHorizontal) {
        var $$ = this, config = $$.config;
@ -4308,14 +4339,15 @@

    c3_chart_internal_fn.textForArcLabel = function (d) {
        var $$ = this,
-            updated, value, ratio, format;
+            updated, value, ratio, id, format;
        if (! $$.shouldShowArcLabel()) { return ""; }
        updated = $$.updateAngle(d);
        value = updated ? updated.value : null;
        ratio = $$.getArcRatio(updated);
+        id = d.data.id;
        if (! $$.hasType('gauge') && ! $$.meetsArcLabelThreshold(ratio)) { return ""; }
        format = $$.getArcLabelFormat();
-        return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
+        return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio);
    };

    c3_chart_internal_fn.expandArc = function (targetIds) {
@ -4459,6 +4491,7 @@
                arcData = $$.convertToArcData(updated);
                // transitions
                $$.expandArc(updated.data.id);
+                $$.api.focus(updated.data.id);
                $$.toggleFocusLegend(updated.data.id, true);
                $$.config.data_onmouseover(arcData, this);
            })
@ -4477,6 +4510,7 @@
                arcData = $$.convertToArcData(updated);
                // transitions
                $$.unexpandArc(updated.data.id);
+                $$.api.revert();
                $$.revertLegend();
                $$.hideTooltip();
                $$.config.data_onmouseout(arcData, this);
@ -5015,6 +5049,7 @@
        $$.zoom = d3.behavior.zoom()
            .on("zoomstart", function () {
                $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
+                config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
            })
            .on("zoom", function () {
                // prevZoomTranslate is needed for the fix of unexpected zoom.translate after remaining zoom
@ -5024,6 +5059,9 @@
                $$.redrawForZoom.call($$);
                prevZoomTranslate = $$.zoom.translate();
                wheeled = d3.event.sourceEvent.type === 'wheel';
+            })
+            .on('zoomend', function () {
+                config.zoom_onzoomend.call($$.api, $$.x.orgDomain());
            });
        $$.zoom.scale = function (scale) {
            return config.axis_rotated ? this.y(scale) : this.x(scale);
@ -5202,6 +5240,7 @@
        defocused: 'c3-defocused',
        region: 'c3-region',
        regions: 'c3-regions',
+        tooltipContainer: 'c3-tooltip-container',
        tooltip: 'c3-tooltip',
        tooltipName: 'c3-tooltip-name',
        shape: 'c3-shape',
@ -5499,7 +5538,16 @@
        $$.isTargetToShow(targetId) ? this.hide(targetId) : this.show(targetId);
    };

-    c3_chart_fn.zoom = function () {
+    c3_chart_fn.zoom = function (domain) {
+        var $$ = this.internal;
+        if (domain) {
+            if ($$.isTimeSeries()) {
+                domain = domain.map(function (x) { return $$.parseDate(x); });
+            }
+            $$.brush.extent(domain);
+            $$.redraw({withUpdateXDomain: true});
+        }
+        return $$.brush.extent();
    };
    c3_chart_fn.zoom.enable = function (enabled) {
        var $$ = this.internal;
@ -5543,6 +5591,7 @@
            };
        }
    };
+
    c3_chart_fn.load = function (args) {
        var $$ = this.internal, config = $$.config;
        // update xs if specified
@ -5559,6 +5608,12 @@
        if ('categories' in args && $$.isCategorized()) {
            config.axis_x_categories = args.categories;
        }
+        // update axes if exists
+        if ('axes' in args) {
+            Object.keys(args.axes).forEach(function (id) {
+                config.data_axes[id] = args.axes[id];
+            });
+        }
        // use cache if exists
        if ('cacheIds' in args && $$.hasCaches(args.cacheIds)) {
            $$.load($$.getCaches(args.cacheIds), args.done);
@ -5578,6 +5633,11 @@
    c3_chart_fn.unload = function (args) {
        var $$ = this.internal;
        args = args || {};
+        if (args instanceof Array) {
+            args = {ids: args};
+        } else if (typeof args === 'string') {
+            args = {ids: [args]};
+        }
        $$.unload($$.mapToTargetIds(args.ids), function () {
            $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true});
            if (args.done) { args.done(); }
--- a/c3.min.css
+++ b/c3.min.css
@ -1 +1 @@
-.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-chart-arcs-title{font-size:1.3em}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000;font-size:28px}
+.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-chart-arcs-title{font-size:1.3em}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000;font-size:28px}
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/zoom.html
+++ b/htdocs/samples/zoom.html
@ -23,7 +23,15 @@
            default: [30, 60]
          }
        },
-        zoom: { enabled: true },
+        zoom: {
+          enabled: true,
+          onzoomstart: function (event) {
+            console.log("onzoomstart", event);
+          },
+          onzoomend: function (domain) {
+            console.log("onzoomend", domain);
+          },
+        },
        subchart: { show: true }
      });

--- a/package.json
+++ b/package.json
@ -19,6 +19,9 @@
  "license": "MIT",
  "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
  "readmeFilename": "README.md",
+  "dependencies": {
+    "d3": "~3.4.4"
+  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.5.0",
--- a/spec/api.zoom-spec.js
+++ b/spec/api.zoom-spec.js
@ -0,0 +1,126 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 api zoom', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25],
+                ['data3', 150, 120, 110, 140, 115, 125]
+            ]
+        },
+        zoom: {
+            enabled: true
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+//        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('zoom', function () {
+
+        it('should be zoomed properly', function () {
+            var target = [3, 5], domain;
+            chart.zoom(target);
+            domain = chart.internal.x.domain();
+            expect(domain[0]).toBe(target[0]);
+            expect(domain[1]).toBe(target[1]);
+        });
+
+        it('should be zoomed properly again', function () {
+            var target = [1, 4], domain;
+            chart.zoom(target);
+            domain = chart.internal.x.domain();
+            expect(domain[0]).toBe(target[0]);
+            expect(domain[1]).toBe(target[1]);
+        });
+
+        it('should load timeseries data', function () {
+            args = {
+                data: {
+                    x: 'date',
+                    columns: [
+                        ['date', '2014-01-01', '2014-01-02', '2014-08-01', '2014-10-19'],
+                        ['data1', 30, 200, 100, 400]
+                    ]
+                },
+                axis: {
+                    x: {
+                        type: 'timeseries'
+                    }
+                },
+                zoom: {
+                    enabled: true
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should be zoomed properly', function () {
+            var target = [new Date(2014, 7, 1), new Date(2014, 8, 1)], domain;
+            chart.zoom(target);
+            domain = chart.internal.x.domain();
+            expect(+domain[0]).toBe(+target[0]);
+            expect(+domain[1]).toBe(+target[1]);
+        });
+
+        it('should be zoomed properly', function () {
+            var target = ['2014-08-01', '2014-09-01'], domain;
+            chart.zoom(target);
+            domain = chart.internal.x.domain();
+            expect(+domain[0]).toBe(+chart.internal.parseDate(target[0]));
+            expect(+domain[1]).toBe(+chart.internal.parseDate(target[1]));
+        });
+
+    });
+
+    describe('unzoom', function () {
+
+        it('should load indexed data', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250]
+                    ]
+                },
+                zoom: {
+                    enabled: true
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should be unzoomed properly', function () {
+            var target = [1, 4], orginal = chart.internal.x.domain(), domain;
+
+            chart.zoom(target);
+            domain = chart.internal.x.domain();
+            expect(domain[0]).toBe(target[0]);
+            expect(domain[1]).toBe(target[1]);
+
+            chart.unzoom();
+            domain = chart.internal.x.domain();
+            expect(domain[0]).toBe(orginal[0]);
+            expect(domain[1]).toBe(orginal[1]);
+        });
+
+    });
+
+});
--- a/spec/data-spec.js
+++ b/spec/data-spec.js
@ -0,0 +1,149 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 chart data', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25],
+                ['data3', 150, 120, 110, 140, 115, 125]
+            ],
+            order: function () {
+                return 0;
+            }
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('function in data.order', function () {
+        it('should return false in isOrderAsc and isOrderDesc functions', function () {
+            expect(chart.internal.isOrderAsc() || chart.internal.isOrderDesc()).toBe(false);
+        });
+    });
+
+    describe('data.xs', function () {
+
+        describe('normal x', function () {
+ 
+            it('should have correct number of xs for each', function () {
+                expect(Object.keys(chart.internal.data.xs).length).toBe(3);
+                expect(chart.internal.data.xs.data1.length).toBe(6);
+                expect(chart.internal.data.xs.data2.length).toBe(6);
+                expect(chart.internal.data.xs.data3.length).toBe(6);
+            });
+
+            it('should have integer index as x', function () {
+                for (var i = 0; i < chart.internal.data.xs.data3.length; i++) {
+                    expect(chart.internal.data.xs.data1[i]).toBe(i);
+                    expect(chart.internal.data.xs.data2[i]).toBe(i);
+                    expect(chart.internal.data.xs.data3[i]).toBe(i);
+                }
+            });
+
+        });
+
+        describe('timeseries x', function () {
+            it('should load timeseries data successfully', function () {
+                args = {
+                    data: {
+                        x : 'date',
+                        columns: [
+                            ['date', '2013-01-01', '2013-01-02', '2013-01-03'],
+                            ['data1', 30, 200, 100],
+                            ['data2', 130, 300, 200]
+                        ]
+                    },
+                    axis : {
+                        x : {
+                            type : 'timeseries'
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have correct number of xs', function () {
+                expect(Object.keys(chart.internal.data.xs).length).toBe(2);
+                expect(chart.internal.data.xs.data1.length).toBe(3);
+                expect(chart.internal.data.xs.data2.length).toBe(3);
+            });
+
+            it('should have Date object as x', function () {
+                var xs = chart.internal.data.xs;
+                expect(+xs.data1[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                expect(+xs.data1[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                expect(+xs.data1[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+                expect(+xs.data2[0]).toBe(+new Date(2013, 0, 1, 0, 0, 0));
+                expect(+xs.data2[1]).toBe(+new Date(2013, 0, 2, 0, 0, 0));
+                expect(+xs.data2[2]).toBe(+new Date(2013, 0, 3, 0, 0, 0));
+            });
+        });
+
+        describe('milliseconds timeseries x', function () {
+            it('should load timeseries data successfully', function () {
+                args = {
+                    data: {
+                        x : 'date',
+                        xFormat: '%Y-%m-%d %H:%M:%S.%L',
+                        columns: [
+                            ['date', "2014-05-20 17:25:00.123", "2014-05-20 17:30:00.345"],
+                            ['data1', 30, 200],
+                            ['data2', 130, 300]
+                        ]
+                    },
+                    axis: {
+                        x: {
+                            type: 'timeseries',
+                            tick: {
+                                format: '%Y-%m-%d %H:%M:%S.%L'
+                            }
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have correct number of xs', function () {
+                expect(Object.keys(chart.internal.data.xs).length).toBe(2);
+                expect(chart.internal.data.xs.data1.length).toBe(2);
+                expect(chart.internal.data.xs.data2.length).toBe(2);
+            });
+
+            it('should have Date object as x', function () {
+                var xs = chart.internal.data.xs;
+                expect(+xs.data1[0]).toBe(+new Date(2014, 4, 20, 17, 25, 0, 123));
+                expect(+xs.data1[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345));
+                expect(+xs.data2[0]).toBe(+new Date(2014, 4, 20, 17, 25, 0, 123));
+                expect(+xs.data2[1]).toBe(+new Date(2014, 4, 20, 17, 30, 0, 345));
+            });
+
+            it('should have milliseconds tick format', function () {
+                var expected = ["2014-05-20 17:25:00.123", "2014-05-20 17:30:00.345"];
+                chart.internal.main.selectAll('.c3-axis-x g.tick text').each(function (d, i) {
+                    expect(d3.select(this).text()).toBe(expected[i]);
+                });
+            });
+
+        });
+
+    });
+});
--- a/spec/domain-spec.js
+++ b/spec/domain-spec.js
@ -0,0 +1,96 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+var initDom = window.initDom;
+
+describe('c3 chart axis', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25]
+            ]
+        },
+        axis: {
+            y: {},
+            y2: {}
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('axis.y.min', function () {
+
+        it('should change axis.y.min to -100', function () {
+            args.axis.y.min = -100;
+            expect(true).toBeTruthy();
+        });
+
+        it('should be set properly when smaller than max of data', function () {
+            var domain = chart.internal.y.domain();
+            expect(domain[0]).toBe(-150);
+            expect(domain[1]).toBe(450);
+        });
+
+        it('should change axis.y.min to 500', function () {
+            args.axis.y.min = 500;
+            expect(true).toBeTruthy();
+        });
+
+        it('should be set properly when bigger than max of data', function () {
+            var domain = chart.internal.y.domain();
+            expect(domain[0]).toBe(499);
+            expect(domain[1]).toBe(511);
+        });
+
+        it('should change axis.y.min to undefined', function () {
+            args.axis.y.min = undefined;
+            expect(true).toBeTruthy();
+        });
+
+    });
+
+    describe('axis.y.max', function () {
+
+        it('should change axis.y.max to 1000', function () {
+            args.axis.y.max = 1000;
+            expect(true).toBeTruthy();
+        });
+
+        it('should be set properly when bigger than min of data', function () {
+            var domain = chart.internal.y.domain();
+            expect(domain[0]).toBe(-89);
+            expect(domain[1]).toBe(1099);
+        });
+
+        it('should change axis.y.max to 0', function () {
+            args.axis.y.max = 0;
+            expect(true).toBeTruthy();
+        });
+
+        it('should be set properly when smaller than min of data', function () {
+            var domain = chart.internal.y.domain();
+            expect(domain[0]).toBe(-11);
+            expect(domain[1]).toBe(1);
+        });
+
+    });
+
+});
--- a/spec/interaction-spec.js
+++ b/spec/interaction-spec.js
@ -0,0 +1,140 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 chart interaction', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25],
+                ['data3', 150, 120, 110, 140, 115, 125]
+            ]
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('generate event rects', function () {
+
+        describe('custom x', function () {
+
+            it('should generate bar chart', function () {
+                args = {
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', 0, 1000, 3000, 10000],
+                            ['data', 10, 10, 10, 10]
+                        ],
+                        type: 'bar'
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have 4 event rects properly', function () {
+                var lefts = [77.5, 137, 203.5, 402.5],
+                    widths = [59.5, 66.5, 199, 191.5];
+                d3.selectAll('.c3-event-rect').each(function (d, i) {
+                    var box = d3.select(this).node().getBoundingClientRect();
+                    expect(box.left).toBe(lefts[i]);
+                    expect(box.width).toBe(widths[i]);
+                });
+            });
+
+            it('should generate bar chart with only one data', function () {
+                args = {
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', 0],
+                            ['data', 10]
+                        ],
+                        type: 'bar'
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have 1 event rects properly', function () {
+                var eventRects = d3.selectAll('.c3-event-rect');
+                expect(eventRects.size()).toBe(1);
+                eventRects.each(function () {
+                    var box = d3.select(this).node().getBoundingClientRect();
+                    expect(box.left).toBe(40.5);
+                    expect(box.width).toBe(590);
+                });
+            });
+        });
+
+        describe('timeseries', function () {
+
+            it('should generate line chart with timeseries', function () {
+                args = {
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', '20140101', '20140201', '20140210',  '20140301'],
+                            ['data', 10, 10, 10, 10]
+                        ]
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have 4 event rects properly', function () {
+                var lefts = [43.5, 191, 349, 494],
+                    widths = [147.5, 158, 145, 134];
+                d3.selectAll('.c3-event-rect').each(function (d, i) {
+                    var box = d3.select(this).node().getBoundingClientRect();
+                    expect(box.left).toBe(lefts[i]);
+                    expect(box.width).toBe(widths[i]);
+                });
+
+            });
+
+            it('should generate line chart with only 1 data timeseries', function () {
+                args = {
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', '20140101'],
+                            ['data', 10]
+                        ]
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have 1 event rects properly', function () {
+                var eventRects = d3.selectAll('.c3-event-rect');
+                expect(eventRects.size()).toBe(1);
+                eventRects.each(function () {
+                    var box = d3.select(this).node().getBoundingClientRect();
+                    expect(box.left).toBe(40.5);
+                    expect(box.width).toBe(590);
+                });
+            });
+
+        });
+
+    });
+
+});
--- a/spec/legend-spec.js
+++ b/spec/legend-spec.js
@ -8,25 +8,80 @@ describe('c3 chart legend', function () {

    var chart, d3;

-    beforeEach(function () {
-        window.initDom();
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25]
+            ]
+        }
+    };

-        chart = window.c3.generate({
-            data: {
-                columns: [
-                    ['data1', 30, 200, 100, 400, 150, 250],
-                    ['data2', 50, 20, 10, 40, 15, 25],
-                    ['data3', 150, 120, 110, 140, 115, 125]
-                ]
-            }
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('legend position', function () {
+
+        it('should be located on the center of chart', function () {
+            var box = chart.internal.legend.node().getBoundingClientRect();
+            expect(box.left + box.right).toBe(640);
        });

-        d3 = chart.internal.d3;
    });

-    it('should be located on the center of chart', function () {
-        var box = chart.internal.legend.node().getBoundingClientRect();
-        expect(box.left + box.right).toBe(640);
+    describe('legend as inset', function () {
+
+        it('should change the legend to "inset" successfully', function () {
+            args.legend = {
+                position: 'inset',
+                inset: {
+                    step: null
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should be positioned properly', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.top).toBe(5.5);
+            expect(box.left).toBe(60.5);
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(48);
+        });
+
+        it('should change the legend step to 1 successfully', function () {
+            args.legend.inset.step = 1;
+            expect(true).toBeTruthy();
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(28);
+        });
+
+        it('should change the legend step to 2 successfully', function () {
+            args.legend.inset.step = 2;
+            expect(true).toBeTruthy();
+        });
+
+        it('should have automatically calculated height', function () {
+            var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
+            expect(box.height).toBe(48);
+        });
+
    });

 });
--- a/spec/shape.line-spec.js
+++ b/spec/shape.line-spec.js
@ -0,0 +1,60 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+var initDom = window.initDom;
+
+describe('c3 chart shape line', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, -150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25],
+                ['data3', -150, 120, 110, 140, 115, 125]
+            ],
+            type: 'line'
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('shape-rendering for line chart', function () {
+
+        it("should not have shape-rendering when it's line chart", function () {
+            d3.selectAll('.c3-line').each(function () {
+                var style = d3.select(this).style('shape-rendering');
+                expect(style).toBe('auto');
+            });
+        });
+
+        it('should chnage to step chart', function () {
+            args.data.type = 'step';
+            expect(true).toBeTruthy();
+        });
+
+        it("should have shape-rendering = crispedges when it's step chart", function () {
+            d3.selectAll('.c3-line').each(function () {
+                var style = d3.select(this).style('shape-rendering');
+                expect(style).toBe('crispedges');
+            });
+        });
+
+    });
+
+});
--- a/spec/type-spec.js
+++ b/spec/type-spec.js
@ -0,0 +1,108 @@
+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 chart types', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 50, 20, 10, 40, 15, 25],
+                ['data3', 150, 120, 110, 140, 115, 125]
+            ],
+            type: 'pie'
+        }
+    };
+
+    beforeEach(function (done) {
+        if (typeof chart === 'undefined') {
+            window.initDom();
+        }
+        chart = window.c3.generate(args);
+        d3 = chart.internal.d3;
+        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
+
+        window.setTimeout(function () {
+            done();
+        }, 10);
+    });
+
+    describe('internal.hasArcType', function () {
+
+        it('should return true', function () {
+            expect(chart.internal.hasArcType()).toBeTruthy();
+        });
+
+        it('should change chart type to "bar" successfully', function () {
+            args.data.type = 'bar';
+            expect(true).toBeTruthy();
+        });
+
+        it('should return false', function () {
+            expect(chart.internal.hasArcType()).toBeFalsy();
+        });
+
+    });
+
+    describe('internal.hasType', function () {
+
+        it('should change chart type to "pie" successfully', function () {
+            args.data.type = 'pie';
+            expect(true).toBeTruthy();
+        });
+
+        it('should return true for "pie" type', function () {
+            expect(chart.internal.hasType('pie')).toBeTruthy();
+        });
+
+        it('should return false for "line" type', function () {
+            expect(chart.internal.hasType('line')).toBeFalsy();
+        });
+
+        it('should return false for "bar" type', function () {
+            expect(chart.internal.hasType('bar')).toBeFalsy();
+        });
+
+        it('should unload successfully', function () {
+            chart.unload([]);
+            expect(true).toBeTruthy();
+        });
+
+        it('should return true for "pie" type even if no data', function () {
+            expect(chart.internal.hasType('pie')).toBeTruthy();
+        });
+
+        it('should return false for "line" type even if no data', function () {
+            expect(chart.internal.hasType('line')).toBeFalsy();
+        });
+
+        it('should return false for "bar" type even if no data', function () {
+            expect(chart.internal.hasType('bar')).toBeFalsy();
+        });
+
+        it('should change chart type to "bar" successfully', function () {
+            args.data.type = 'bar';
+            expect(true).toBeTruthy();
+        });
+
+        it('should return false for "pie" type even if no data', function () {
+            expect(chart.internal.hasType('pie')).toBeFalsy();
+        });
+
+        it('should return false for "line" type even if no data', function () {
+            expect(chart.internal.hasType('line')).toBeFalsy();
+        });
+
+        it('should return true for "bar" type even if no data', function () {
+            expect(chart.internal.hasType('bar')).toBeTruthy();
+        });
+
+
+    });
+
+});
--- a/src/api.load.js
+++ b/src/api.load.js
@ -14,6 +14,12 @@ c3_chart_fn.load = function (args) {
    if ('categories' in args && $$.isCategorized()) {
        config.axis_x_categories = args.categories;
    }
+    // update axes if exists
+    if ('axes' in args) {
+        Object.keys(args.axes).forEach(function (id) {
+            config.data_axes[id] = args.axes[id];
+        });
+    }
    // use cache if exists
    if ('cacheIds' in args && $$.hasCaches(args.cacheIds)) {
        $$.load($$.getCaches(args.cacheIds), args.done);
@ -33,6 +39,11 @@ c3_chart_fn.load = function (args) {
 c3_chart_fn.unload = function (args) {
    var $$ = this.internal;
    args = args || {};
+    if (args instanceof Array) {
+        args = {ids: args};
+    } else if (typeof args === 'string') {
+        args = {ids: [args]};
+    }
    $$.unload($$.mapToTargetIds(args.ids), function () {
        $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true});
        if (args.done) { args.done(); }
--- a/src/api.zoom.js
+++ b/src/api.zoom.js
@ -1,4 +1,13 @@
-c3_chart_fn.zoom = function () {
+c3_chart_fn.zoom = function (domain) {
+    var $$ = this.internal;
+    if (domain) {
+        if ($$.isTimeSeries()) {
+            domain = domain.map(function (x) { return $$.parseDate(x); });
+        }
+        $$.brush.extent(domain);
+        $$.redraw({withUpdateXDomain: true});
+    }
+    return $$.brush.extent();
 };
 c3_chart_fn.zoom.enable = function (enabled) {
    var $$ = this.internal;
@ -41,4 +50,4 @@ c3_chart_fn.zoom.range = function (range) {
            min: this.domain.min()
        };
    }
-};
+};
--- a/src/arc.js
+++ b/src/arc.js
@ -108,14 +108,15 @@ c3_chart_internal_fn.convertToArcData = function (d) {

 c3_chart_internal_fn.textForArcLabel = function (d) {
    var $$ = this,
-        updated, value, ratio, format;
+        updated, value, ratio, id, format;
    if (! $$.shouldShowArcLabel()) { return ""; }
    updated = $$.updateAngle(d);
    value = updated ? updated.value : null;
    ratio = $$.getArcRatio(updated);
+    id = d.data.id;
    if (! $$.hasType('gauge') && ! $$.meetsArcLabelThreshold(ratio)) { return ""; }
    format = $$.getArcLabelFormat();
-    return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
+    return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio);
 };

 c3_chart_internal_fn.expandArc = function (targetIds) {
@ -259,6 +260,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
            arcData = $$.convertToArcData(updated);
            // transitions
            $$.expandArc(updated.data.id);
+            $$.api.focus(updated.data.id);
            $$.toggleFocusLegend(updated.data.id, true);
            $$.config.data_onmouseover(arcData, this);
        })
@ -277,6 +279,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
            arcData = $$.convertToArcData(updated);
            // transitions
            $$.unexpandArc(updated.data.id);
+            $$.api.revert();
            $$.revertLegend();
            $$.hideTooltip();
            $$.config.data_onmouseout(arcData, this);
--- a/src/axis.js
+++ b/src/axis.js
@ -270,7 +270,7 @@ c3_chart_internal_fn.getMaxTickWidth = function (id) {
        $$.d3.select('body').append("g").style('visibility', 'hidden').call(axis).each(function () {
            $$.d3.select(this).selectAll('text').each(function () {
                var box = this.getBoundingClientRect();
-                if (maxWidth < box.width) { maxWidth = box.width; }
+                if (box.left > 0 && maxWidth < box.width) { maxWidth = box.width; }
            });
        }).remove();
    }
--- a/src/class.js
+++ b/src/class.js
@ -26,6 +26,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
    defocused: 'c3-defocused',
    region: 'c3-region',
    regions: 'c3-regions',
+    tooltipContainer: 'c3-tooltip-container',
    tooltip: 'c3-tooltip',
    tooltipName: 'c3-tooltip-name',
    shape: 'c3-shape',
--- a/src/clip.js
+++ b/src/clip.js
@ -7,7 +7,8 @@ c3_chart_internal_fn.appendClip = function (parent, id) {
 };
 c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
    // axis line width + padding for left
-    return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);
+    var left = Math.max(30, this.margin.left);
+    return forHorizontal ? -(1 + left) : -(left - 1);
 };
 c3_chart_internal_fn.getAxisClipY = function (forHorizontal) {
    return forHorizontal ? -20 : -4;
@ -29,9 +30,11 @@ c3_chart_internal_fn.getYAxisClipY = function () {
    return $$.getAxisClipY($$.config.axis_rotated);
 };
 c3_chart_internal_fn.getAxisClipWidth = function (forHorizontal) {
-    var $$ = this;
+    var $$ = this,
+        left = Math.max(30, $$.margin.left),
+        right = Math.max(30, $$.margin.right);
    // width + axis line width + padding for left/right
-    return forHorizontal ? $$.width + 2 + 30 + 30 : $$.margin.left + 20;
+    return forHorizontal ? $$.width + 2 + left + right : $$.margin.left + 20;
 };
 c3_chart_internal_fn.getAxisClipHeight = function (forHorizontal) {
    var $$ = this, config = $$.config;
--- a/src/config.js
+++ b/src/config.js
@ -11,6 +11,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        zoom_extent: undefined,
        zoom_privileged: false,
        zoom_onzoom: function () {},
+        zoom_onzoomstart: function () {},
+        zoom_onzoomend: function () {},
        zoom_x_min: undefined,
        zoom_x_max: undefined,
        interaction_enabled: true,
@ -136,7 +138,9 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        point_focus_expand_enabled: true,
        point_focus_expand_r: undefined,
        point_select_r: undefined,
+        // line
        line_connectNull: false,
+        line_step_type: 'step',
        // bar
        bar_width: undefined,
        bar_width_ratio: 0.6,
--- a/src/core.js
+++ b/src/core.js
@ -544,7 +544,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
    // lines, areas and cricles
    $$.redrawLine(durationForExit);
    $$.redrawArea(durationForExit);
-    if (config.point_show) { $$.redrawCircle(); }
+    $$.redrawCircle();

    // text
    if ($$.hasDataLabel()) {
@ -577,7 +577,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
        $$.addTransitionForBar(transitions, drawBar);
        $$.addTransitionForLine(transitions, drawLine);
        $$.addTransitionForArea(transitions, drawArea);
-        if (config.point_show) { $$.addTransitionForCircle(transitions, cx, cy); }
+        $$.addTransitionForCircle(transitions, cx, cy);
        $$.addTransitionForText(transitions, xForText, yForText, options.flow);
        $$.addTransitionForRegion(transitions);
        $$.addTransitionForGrid(transitions);
@ -684,7 +684,7 @@ c3_chart_internal_fn.initialOpacity = function (d) {
    return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0;
 };
 c3_chart_internal_fn.opacityForCircle = function (d) {
-    return isValue(d.value) ? this.isScatterType(d) ? 0.5 : 1 : 0;
+    return isValue(d.value) && this.config.point_show ? (this.isScatterType(d) ? 0.5 : 1) : 0;
 };
 c3_chart_internal_fn.opacityForText = function () {
    return this.hasDataLabel() ? 1 : 0;
--- a/src/data.js
+++ b/src/data.js
@ -161,8 +161,8 @@ c3_chart_internal_fn.filterTargetsToShow = function (targets) {
 };
 c3_chart_internal_fn.mapTargetsToUniqueXs = function (targets) {
    var $$ = this;
-    var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return v.x; }); }))).values();
-    return $$.isTimeSeries() ? xs.map(function (x) { return new Date(x); }) : xs.map(function (x) { return +x; });
+    var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return +v.x; }); }))).values();
+    return $$.isTimeSeries() ? xs.map(function (x) { return new Date(+x); }) : xs.map(function (x) { return +x; });
 };
 c3_chart_internal_fn.addHiddenTargetIds = function (targetIds) {
    this.hiddenTargetIds = this.hiddenTargetIds.concat(targetIds);
@ -206,11 +206,11 @@ c3_chart_internal_fn.hasPositiveValueInTargets = function (targets) {
 };
 c3_chart_internal_fn.isOrderDesc = function () {
    var config = this.config;
-    return config.data_order && config.data_order.toLowerCase() === 'desc';
+    return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'desc';
 };
 c3_chart_internal_fn.isOrderAsc = function () {
    var config = this.config;
-    return config.data_order && config.data_order.toLowerCase() === 'asc';
+    return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'asc';
 };
 c3_chart_internal_fn.orderTargets = function (targets) {
    var $$ = this, config = $$.config, orderAsc = $$.isOrderAsc(), orderDesc = $$.isOrderDesc();
--- a/src/domain.js
+++ b/src/domain.js
@ -73,6 +73,15 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
        isZeroBased = ($$.hasType('bar', yTargets) && config.bar_zerobased) || ($$.hasType('area', yTargets) && config.area_zerobased),
        showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated,
        showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated;
+
+    if (yDomainMax < yDomainMin) {
+        if (isValue(yMin)) {
+            yDomainMax = yDomainMin + 10; // TODO: introduce axis.y.maxMin
+        } else {
+            yDomainMin = yDomainMax - 10; // TODO: introduce axis.y.minMax
+        }
+    }
+
    if (yTargets.length === 0) { // use current domain if target of axisId is none
        return axisId === 'y2' ? $$.y2.domain() : $$.y.domain();
    }
--- a/src/interaction.js
+++ b/src/interaction.js
@ -60,27 +60,30 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
    else {
        if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
            rectW = function (d) {
-                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index],
-                    w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
+                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);

                // if there this is a single data point make the eventRect full width (or height)
                if (prevX === null && nextX === null) {
                    return config.axis_rotated ? $$.height : $$.width;
                }
-                else {
-                    return w < 0 ? 0 : w;
-                }
+
+                if (prevX === null) { prevX = $$.x.domain()[0]; }
+                if (nextX === null) { nextX = $$.x.domain()[1]; }
+
+                return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2);
            };
            rectX = function (d) {
-                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), dx = $$.data.xs[d.id][d.index];
-                
+                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index),
+                    thisX = $$.data.xs[d.id][d.index];
+
                // if there this is a single data point position the eventRect at 0
                if (prevX === null && nextX === null) {
                    return 0;
                }
-                else {
-                    return ($$.x(dx) + $$.x(prevX ? prevX : dx)) / 2;
-                }
+
+                if (prevX === null) { prevX = $$.x.domain()[0]; }
+
+                return ($$.x(thisX) + $$.x(prevX)) / 2;
            };
        } else {
            rectW = $$.getEventRectWidth();
@ -158,7 +161,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
            if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
            if ($$.hasArcType()) { return; }

-            if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+            if ($$.isStepType(d) && $$.config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
                index -= 1;
            }

@ -192,12 +195,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
                    }
                })
                .filter(function (d) {
-                    if (this.nodeName === 'circle') {
-                        return $$.isWithinCircle(this, $$.pointSelectR(d));
-                    }
-                    else if (this.nodeName === 'path') {
-                        return $$.isWithinBar(this);
-                    }
+                    return $$.isWithinShape(this, d);
                })
                .each(function (d) {
                    if (config.data_selection_enabled && (config.data_selection_grouped || config.data_selection_isselectable(d))) {
@ -218,7 +216,7 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
                $$.cancelClick = false;
                return;
            }
-            if ($$.isStepType(d) && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
+            if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) {
                index -= 1;
            }
            $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
--- a/src/legend.js
+++ b/src/legend.js
@ -40,12 +40,10 @@ c3_chart_internal_fn.getLegendWidth = function () {
    return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
 };
 c3_chart_internal_fn.getLegendHeight = function () {
-    var $$ = this, config = $$.config, h = 0;
-    if (config.legend_show) {
+    var $$ = this, h = 0;
+    if ($$.config.legend_show) {
        if ($$.isLegendRight) {
            h = $$.currentHeight;
-        } else if ($$.isLegendInset) {
-            h = config.legend_inset_step ? Math.max(20, $$.legendItemHeight) * (config.legend_inset_step + 1) : $$.height;
        } else {
            h = Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1);
        }
@ -176,6 +174,11 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
        }
    }

+    if ($$.isLegendInset) {
+        step = config.legend_inset_step ? config.legend_inset_step : targetIds.length;
+        $$.updateLegendStep(step);
+    }
+
    if ($$.isLegendRight) {
        xForLegend = function (id) { return maxWidth * steps[id]; };
        yForLegend = function (id) { return margins[steps[id]] + offsets[id]; };
@ -253,7 +256,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
        $$.legend.insert('g', '.' + CLASS.legendItem)
            .attr("class", CLASS.legendBackground)
            .append('rect')
-            .attr('height', $$.getLegendHeight() - 10)
+            .attr('height', $$.getLegendHeight() - 12)
            .attr('width', maxWidth * (step + 1) + 10);
    }

--- a/src/shape.js
+++ b/src/shape.js
@ -49,9 +49,11 @@ c3_chart_internal_fn.getShapeOffset = function (typeFilter, indices, isSub) {
 c3_chart_internal_fn.isWithinShape = function (that, d) {
    var $$ = this,
        shape = $$.d3.select(that), isWithin;
-    if (that.nodeName === 'circle') {
-        // circle is hidden in step chart, so treat as within the click area
-        isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+    if (!$$.isTargetToShow(d.id)) {
+        isWithin = false;
+    }
+    else if (that.nodeName === 'circle') {
+        isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScale(d.id)(d.value)) : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
    }
    else if (that.nodeName === 'path') {
        isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
@ -62,5 +64,5 @@ c3_chart_internal_fn.isWithinShape = function (that, d) {

 c3_chart_internal_fn.getInterpolate = function (d) {
    var $$ = this;
-    return $$.isSplineType(d) ? "cardinal" : $$.isStepType(d) ? "step-after" : "linear";
+    return $$.isSplineType(d) ? "cardinal" : $$.isStepType(d) ? $$.config.line_step_type : "linear";
 };
--- a/src/shape.line.js
+++ b/src/shape.line.js
@ -48,6 +48,7 @@ c3_chart_internal_fn.redrawLine = function (durationForExit) {
        .style("stroke", $$.color);
    $$.mainLine
        .style("opacity", $$.initialOpacity.bind($$))
+        .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
        .attr('transform', null);
    $$.mainLine.exit().transition().duration(durationForExit)
        .style('opacity', 0)
@ -329,7 +330,7 @@ c3_chart_internal_fn.unexpandCircles = function (i) {
 };
 c3_chart_internal_fn.pointR = function (d) {
    var $$ = this, config = $$.config;
-    return config.point_show && !$$.isStepType(d) ? (isFunction(config.point_r) ? config.point_r(d) : config.point_r) : 0;
+    return $$.isStepType(d) ? 0 : (isFunction(config.point_r) ? config.point_r(d) : config.point_r);
 };
 c3_chart_internal_fn.pointExpandedR = function (d) {
    var $$ = this, config = $$.config;
@ -339,9 +340,12 @@ c3_chart_internal_fn.pointSelectR = function (d) {
    var $$ = this, config = $$.config;
    return config.point_select_r ? config.point_select_r : $$.pointR(d) * 4;
 };
-c3_chart_internal_fn.isWithinCircle = function (_this, _r) {
+c3_chart_internal_fn.isWithinCircle = function (that, r) {
    var d3 = this.d3,
-        mouse = d3.mouse(_this), d3_this = d3.select(_this),
-        cx = d3_this.attr("cx") * 1, cy = d3_this.attr("cy") * 1;
-    return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < _r;
+        mouse = d3.mouse(that), d3_this = d3.select(that),
+        cx = +d3_this.attr("cx"), cy = +d3_this.attr("cy");
+    return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < r;
+};
+c3_chart_internal_fn.isWithinStep = function (that, y) {
+    return Math.abs(y - this.d3.mouse(that)[1]) < 30;
 };
--- a/src/size.js
+++ b/src/size.js
@ -75,7 +75,7 @@ c3_chart_internal_fn.getAxisWidthByAxisId = function (id) {
 };
 c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
    var $$ = this, config = $$.config;
-    if (axisId === 'x' && !config.axis_x_show) { return 0; }
+    if (axisId === 'x' && !config.axis_x_show) { return 8; }
    if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
    if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; }
    if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
--- a/src/tooltip.js
+++ b/src/tooltip.js
@ -2,10 +2,10 @@ c3_chart_internal_fn.initTooltip = function () {
    var $$ = this, config = $$.config, i;
    $$.tooltip = $$.selectChart
        .style("position", "relative")
-        .append("div")
+      .append("div")
+        .attr('class', CLASS.tooltipContainer)
        .style("position", "absolute")
        .style("pointer-events", "none")
-        .style("z-index", "10")
        .style("display", "none");
    // Show tooltip if needed
    if (config.tooltip_init_show) {
@ -38,7 +38,7 @@ c3_chart_internal_fn.getTooltipContent = function (d, defaultTitleFormat, defaul
            text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
        }

-        name = nameFormat(d[i].name);
+        name = nameFormat(d[i].name, d[i].ratio, d[i].id, d[i].index);
        value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

--- a/src/type.js
+++ b/src/type.js
@ -10,11 +10,19 @@ c3_chart_internal_fn.setTargetType = function (targetIds, type) {
 };
 c3_chart_internal_fn.hasType = function (type, targets) {
    var $$ = this, types = $$.config.data_types, has = false;
-    (targets || $$.data.targets).forEach(function (t) {
-        if ((types[t.id] && types[t.id].indexOf(type) >= 0) || (!(t.id in types) && type === 'line')) {
-            has = true;
-        }
-    });
+    targets = targets || $$.data.targets;
+    if (targets.length) {
+        targets.forEach(function (target) {
+            var t = types[target.id];
+            if ((t && t.indexOf(type) >= 0) || (!t && type === 'line')) {
+                has = true;
+            }
+        });
+    } else {
+        Object.keys(types).forEach(function (id) {
+            if (types[id] === type) { has = true; }
+        });
+    }
    return has;
 };
 c3_chart_internal_fn.hasArcType = function (targets) {
--- a/src/zoom.js
+++ b/src/zoom.js
@ -4,6 +4,7 @@ c3_chart_internal_fn.initZoom = function () {
    $$.zoom = d3.behavior.zoom()
        .on("zoomstart", function () {
            $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
+            config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
        })
        .on("zoom", function () {
            // prevZoomTranslate is needed for the fix of unexpected zoom.translate after remaining zoom
@ -13,6 +14,9 @@ c3_chart_internal_fn.initZoom = function () {
            $$.redrawForZoom.call($$);
            prevZoomTranslate = $$.zoom.translate();
            wheeled = d3.event.sourceEvent.type === 'wheel';
+        })
+        .on('zoomend', function () {
+            config.zoom_onzoomend.call($$.api, $$.x.orgDomain());
        });
    $$.zoom.scale = function (scale) {
        return config.axis_rotated ? this.y(scale) : this.x(scale);