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

Conflicts:
	c3.js
	c3.min.js
	src/config.js

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

c3.css

@@ -148,6 +148,9 @@
 
 /*-- Tooltip --*/
 
+.c3-tooltip-container {
+  z-index: 10;
+}
 .c3-tooltip {
   border-collapse:collapse;
   border-spacing:0;

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();
+        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; });
+        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],
+                    var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);
-                        w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
 
                     // 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 $$.isWithinShape(this, d);
-                            return $$.isWithinCircle(this, $$.pointSelectR(d));
-                        }
-                        else if (this.nodeName === 'path') {
-                            return $$.isWithinBar(this);
-                        }
                     })
                     .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') {
+        if (!$$.isTargetToShow(d.id)) {
-            // circle is hidden in step chart, so treat as within the click area
+            isWithin = false;
-            isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+        }
+        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),
+            mouse = d3.mouse(that), d3_this = d3.select(that),
-            cx = d3_this.attr("cx") * 1, cy = d3_this.attr("cy") * 1;
+            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;
+        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) {
+        targets = targets || $$.data.targets;
-            if ((types[t.id] && types[t.id].indexOf(type) >= 0) || (!(t.id in types) && type === 'line')) {
+        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) {
@@ -3387,9 +3412,9 @@
         $$.tooltip = $$.selectChart
             .style("position", "relative")
           .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;
+        var $$ = this, h = 0;
-        if (config.legend_show) {
+        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(); }

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}

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 }
       });
 

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",

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]);
+        });
+
+    });
+
+});

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]);
+                });
+            });
+
+        });
+
+    });
+});

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);
+        });
+
+    });
+
+});

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);
+                });
+            });
+
+        });
+
+    });
+
+});

spec/legend-spec.js

@@ -8,25 +8,80 @@ describe('c3 chart legend', function () {
 
     var chart, d3;
 
-    beforeEach(function () {
+    var args = {
-        window.initDom();
-
-        chart = window.c3.generate({
         data: {
             columns: [
                 ['data1', 30, 200, 100, 400, 150, 250],
-                    ['data2', 50, 20, 10, 40, 15, 25],
+                ['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);
         });
 
     });
+
+    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);
+        });
+
+    });
+
+});

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');
+            });
+        });
+
+    });
+
+});

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();
+        });
+
+
+    });
+
+});

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(); }

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;

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);

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();
     }

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',

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;

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,

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;

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();
+    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; });
+    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();

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();
     }

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],
+                var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index);
-                    w = ($$.x(nextX ? nextX : dx) - $$.x(prevX ? prevX : dx)) / 2;
 
                 // 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 $$.isWithinShape(this, d);
-                        return $$.isWithinCircle(this, $$.pointSelectR(d));
-                    }
-                    else if (this.nodeName === 'path') {
-                        return $$.isWithinBar(this);
-                    }
                 })
                 .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) {

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;
+    var $$ = this, h = 0;
-    if (config.legend_show) {
+    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);
     }
 

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') {
+    if (!$$.isTargetToShow(d.id)) {
-        // circle is hidden in step chart, so treat as within the click area
+        isWithin = false;
-        isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+    }
+    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";
 };

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),
+        mouse = d3.mouse(that), d3_this = d3.select(that),
-        cx = d3_this.attr("cx") * 1, cy = d3_this.attr("cy") * 1;
+        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;
+    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;
 };

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; }

src/tooltip.js

@@ -3,9 +3,9 @@ c3_chart_internal_fn.initTooltip = function () {
     $$.tooltip = $$.selectChart
         .style("position", "relative")
       .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);
 

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) {
+    targets = targets || $$.data.targets;
-        if ((types[t.id] && types[t.id].indexOf(type) >= 0) || (!(t.id in types) && type === 'line')) {
+    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) {

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);