Squashed commit of the following:

commit 547311d30c
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Jun 23 14:35:09 2017 +0200

    for multi-arc-gauge the radius has changed to let the label fit in the chart

commit 43ba49dd15
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Jun 23 13:00:29 2017 +0200

    fixed warnings of travis check

commit 7f5a025de4
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Feb 4 15:14:34 2016 +0100

    rebased, conflict resolved, bugfixed, refactored and tests added

commit 013f0666a7
Merge: ff175d1 c343243
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Jun 23 12:40:39 2017 +0200

    Merge remote-tracking branch 'upstream/master' into feature/multi-arc-gauge

    # Conflicts:
    #	src/arc.js
    #	src/data.js

commit ff175d15ea
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Feb 4 15:14:34 2016 +0100

    optimized position of arc label line

commit 0bf2cefff3
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Feb 4 14:44:50 2016 +0100

    wrong tooltip position for gauges fixed

commit 155c08c045
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Feb 4 14:49:25 2016 +0100

    also hide arc label line when gauge_label_show is false

commit e145b5c2a5
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Aug 28 09:36:31 2015 +0200

    draw line from arc end to its label to highlight the relation

commit 28616bf810
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Aug 28 09:36:31 2015 +0200

    add background for every single arc

commit cb2aaf1672
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Aug 28 09:36:31 2015 +0200

    label placement for more than one arc

commit 6ecc609878
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Fri Aug 28 09:36:31 2015 +0200

    gauge_arcs_minWidth property to determine the minimal width of gaugearcs until the innerRadius disappears

commit 5689dee384
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Aug 27 10:24:18 2015 +0200

    visibleTargetCount for cleaner arc calculation

commit 9a2686c37f
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Thu Aug 27 10:21:13 2015 +0200

    more than one arc are possible for gauges

commit 0866234001
Author: Gökhan Özen <Goekhan.Oezen@hksinformatik.de>
Date:   Mon Aug 10 17:07:48 2015 +0200

    show legend for gauges which have more than one arc

spec/arc-spec.js

@@ -198,7 +198,7 @@ describe('c3 chart arc', function () {
                         .select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data')
                         .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
 
-                expect(data.attr('d')).toMatch(/M-304,-3\..+A304,304 0 0,1 245\..+,-178\..+L237\..+,-172\..+A294,294 0 0,0 -294,-3\..+Z/);
+                expect(data.attr('d')).toMatch(/-258.4,-3\..+A258.4,258.4 0 0,1 209\..+,-151\..+L200\..+,-146\..+A248.39999999999998,248.39999999999998 0 0,0 -248.39999999999998,-3\..+Z/);
             });
         });
 
@@ -229,7 +229,7 @@ describe('c3 chart arc', function () {
                         .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
 
                 // This test has bee updated to make tests pass. @TODO double-check this test is accurate.
-                expect(data.attr('d')).toMatch(/M-221.*?,-2\..+A221.*?,221.*? 0 1,1 -68.*?,210.*?L-65.*?,201.*?A211.*?,211.*? 0 1,0 -211.*?,-2.*?Z/);
+                expect(data.attr('d')).toMatch(/M-180.*?,-2\..+A180.*?,180.*? 0 1,1 -55.*?,171.*?L-52.*?,161.*?A170.*?,170.*? 0 1,0 -170.*?,-2.*?Z/);
             });
 
             describe('with labels use custom text', function() {
@@ -269,6 +269,99 @@ describe('c3 chart arc', function () {
                 });
             });
         });
+
+        describe('with more than one data_column ', function () {
+            beforeAll(function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['padded1', 100],
+                            ['padded2', 90],
+                            ['padded3', 50],
+                            ['padded4', 20]
+                        ]
+                    },
+                    type: 'gauge',
+                    color: {
+                        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+                        threshold: {
+                            values: [30, 80, 95]
+                        }
+                    }
+                };
+            });
+            var arcColor = ['#60b044', '#f6c600', '#f97600', '#ff0000'];
+
+            describe('should contain arcs ', function () {
+                it('each data_column should have one arc', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
+                        expect(d3.select(this).classed('c3-chart-data-' + args.data.columns[i][0])).toBeTruthy();
+                    });
+                });
+
+                it('each arc should have the color from color_pattern if color_treshold is given ', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
+                        expect(d3.select(this).style('fill')).toBe(arcColor[i]);
+                    });
+                });
+            });
+
+            describe('should contain backgrounds ', function () {
+                it('each data_column should have one background', function () {
+                    chart.internal.main.selectAll('.c3-chart-arcs path.c3-chart-arcs-background').each(function (d, i) {
+                        expect(d3.select(this).classed('c3-chart-arcs-background-'+ i)).toBeTruthy();
+                    });
+                });
+
+                it('each background should have tbe same color', function () {
+                    chart.internal.main.selectAll('.c3-chart-arcs path.c3-chart-arcs-background').each(function () {
+                        expect(d3.select(this).style('fill')).toBe('#e0e0e0');
+                    });
+                });
+            });
+
+            describe('should contain labels', function () {
+                it('each data_column should have a label', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-gauge-value').each(function (d, i) {
+                        expect(d3.select(this).text()).toBe(args.data.columns[i][1]);
+                    });
+                });
+
+                it('each label should have the same color', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-gauge-value').each(function () {
+                        expect(d3.select(this).style('fill')).toBe('#000');
+                    });
+
+                });
+
+                it('if only one data_column is visible the label should have "" for transform', function () {
+                    setTimeout(function () {
+                        var textBeforeHide = chart.internal.main.select('.c3-chart-arc.c3-target.c3-target-padded4 text');
+                        expect(textBeforeHide.attr('transform')).not.toBe('');
+                    },1000);
+                    chart.hide(['padded1', 'padded2', 'padded3']);
+                    setTimeout(function () {
+                        var textAfterHide = chart.internal.main.select('.c3-chart-arc.c3-target.c3-target-padded4 text');
+                        expect(textAfterHide.attr('transform')).toBe('');
+                    },1000);
+
+                });
+            });
+
+            describe('should contain labellines', function () {
+                it('each data_column should have a labelline', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc-label-line').each(function (d, i) {
+                        expect(d3.select(this).classed('c3-data-' + args.data.columns[i][0])).toBeTruthy();
+                    });
+                });
+
+                it('each labelline should have the color from color_pattern if color_treshold is given', function () {
+                    chart.internal.main.selectAll('.c3-chart-arc .c3-arc-label-line').each(function (d, i) {
+                        expect(d3.select(this).style('fill')).toBe(arcColor[i]);
+                    });
+                });
+            });
+        });
     });
 
 });

spec/legend-spec.js

@@ -274,4 +274,68 @@ describe('c3 chart legend', function () {
         });
     });
 
+    describe('legend item tile coloring with color_treshold', function () {
+        beforeAll(function () {
+            args = {
+                data: {
+                    columns: [
+                        ['padded1', 100],
+                        ['padded2', 90],
+                        ['padded3', 50],
+                        ['padded4', 20]
+                    ]
+                },
+                type: 'gauge',
+                color: {
+                    pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+                    threshold: {
+                        values: [30, 80, 95]
+                    }
+                }
+            };
+        });
+
+        // espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc
+        it('selects the color from color_pattern if color_treshold is given', function () {
+            var tileColor = [];
+            d3.selectAll('.c3-legend-item-tile').each(function () {
+                tileColor.push(d3.select(this).style('stroke'));
+            });
+            expect(tileColor[0]).toBe('rgb(96, 176, 68)');
+            expect(tileColor[1]).toBe('rgb(246, 198, 0)');
+            expect(tileColor[2]).toBe('rgb(249, 118, 0)');
+            expect(tileColor[3]).toBe('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('legend item tile coloring without color_treshold', function () {
+        beforeAll(function () {
+            args = {
+                data: {
+                    columns: [
+                        ['padded1', 100],
+                        ['padded2', 90],
+                        ['padded3', 50],
+                        ['padded4', 20]
+                    ],
+                    colors: {
+                        'padded1': '#60b044',
+                        'padded4': '#8b008b'
+                    }
+                },
+                type: 'gauge'
+            };
+        });
+
+        it('selects the color from data_colors, data_color or default', function () {
+            var tileColor = [];
+            d3.selectAll('.c3-legend-item-tile').each(function () {
+                tileColor.push(d3.select(this).style('stroke'));
+            });
+            expect(tileColor[0]).toBe('rgb(96, 176, 68)');
+            expect(tileColor[1]).toBe('rgb(31, 119, 180)');
+            expect(tileColor[2]).toBe('rgb(255, 127, 14)');
+            expect(tileColor[3]).toBe('rgb(139, 0, 139)');
+        });
+    });
 });

src/arc.js

@@ -12,11 +12,13 @@ c3_chart_internal_fn.initPie = function () {
 
 c3_chart_internal_fn.updateRadius = function () {
     var $$ = this, config = $$.config,
-        w = config.gauge_width || config.donut_width;
+        w = config.gauge_width || config.donut_width,
-    $$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2;
+        gaugeArcWidth = $$.filterTargetsToShow($$.data.targets).length * $$.config.gauge_arcs_minWidth;
+    $$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2 * ($$.hasType('gauge') ? 0.85 : 1);
     $$.radius = $$.radiusExpanded * 0.95;
     $$.innerRadiusRatio = w ? ($$.radius - w) / $$.radius : 0.6;
     $$.innerRadius = $$.hasType('donut') || $$.hasType('gauge') ? $$.radius * $$.innerRadiusRatio : 0;
+    $$.gaugeArcWidth = w ? w : (gaugeArcWidth <= $$.radius - $$.innerRadius ? $$.radius - $$.innerRadius : (gaugeArcWidth <= $$.radius ? gaugeArcWidth : $$.radius));
 };
 
 c3_chart_internal_fn.updateArc = function () {
@@ -61,8 +63,13 @@ c3_chart_internal_fn.updateAngle = function (d) {
 };
 
 c3_chart_internal_fn.getSvgArc = function () {
-    var $$ = this,
+    var $$ = this, hasGaugeType = $$.hasType('gauge'),
-        arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius),
+        singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
+        arc = $$.d3.svg.arc().outerRadius(function(d) {
+            return hasGaugeType ? $$.radius - singleArcWidth * d.index : $$.radius;
+        }).innerRadius(function(d) {
+            return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
+        }),
         newArc = function (d, withoutUpdate) {
             var updated;
             if (withoutUpdate) { return arc(d); } // for interpolate
@@ -75,8 +82,15 @@ c3_chart_internal_fn.getSvgArc = function () {
 };
 
 c3_chart_internal_fn.getSvgArcExpanded = function (rate) {
-    var $$ = this,
+    rate = rate || 1;
-        arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
+    var $$ = this, hasGaugeType = $$.hasType('gauge'),
+        singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
+        expandWidth = Math.min($$.radiusExpanded * rate - $$.radius, singleArcWidth * 0.8 - (1 - rate) * 100),
+        arc = $$.d3.svg.arc().outerRadius(function(d){
+            return hasGaugeType ? $$.radius - singleArcWidth * d.index + expandWidth : $$.radiusExpanded * rate;
+        }).innerRadius(function(d){
+            return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
+        });
     return function (d) {
         var updated = $$.updateAngle(d);
         return updated ? arc(updated) : "M 0 0";
@@ -90,8 +104,8 @@ c3_chart_internal_fn.getArc = function (d, withoutUpdate, force) {
 
 c3_chart_internal_fn.transformForArcLabel = function (d) {
     var $$ = this, config = $$.config,
-        updated = $$.updateAngle(d), c, x, y, h, ratio, translate = "";
+        updated = $$.updateAngle(d), c, x, y, h, ratio, translate = "", hasGauge = $$.hasType('gauge');
-    if (updated && !$$.hasType('gauge')) {
+    if (updated && !hasGauge) {
         c = this.svgArc.centroid(updated);
         x = isNaN(c[0]) ? 0 : c[0];
         y = isNaN(c[1]) ? 0 : c[1];
@@ -105,6 +119,12 @@ c3_chart_internal_fn.transformForArcLabel = function (d) {
         }
         translate = "translate(" + (x * ratio) +  ',' + (y * ratio) +  ")";
     }
+    else if (updated && hasGauge && $$.filterTargetsToShow($$.data.targets).length > 1) {
+        var y1 = Math.sin(updated.endAngle - Math.PI / 2);
+        x = Math.cos(updated.endAngle - Math.PI / 2) * ($$.radiusExpanded + 25);
+        y = y1 * ($$.radiusExpanded + 15 - Math.abs(y1 * 10)) + 3;
+        translate = "translate(" + x +  ',' + y +  ")";
+    }
     return translate;
 };
 
@@ -287,7 +307,7 @@ c3_chart_internal_fn.initArc = function () {
 
 c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
     var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
-        mainArc;
+        mainArc, backgroundArc, mainArcLabelLine, hasGaugeType = $$.hasType('gauge');
     mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
         .data($$.arcData.bind($$));
     mainArc.enter().append('path')
@@ -300,6 +320,37 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
             }
             this._current = d;
         });
+    if (hasGaugeType) {
+        mainArcLabelLine = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arcLabelLine)
+            .data($$.arcData.bind($$));
+        mainArcLabelLine.enter().append('rect')
+            .attr("class", function (d) { return CLASS.arcLabelLine + ' ' + CLASS.target + ' ' + CLASS.target + '-' + d.data.id; });
+        if ($$.filterTargetsToShow($$.data.targets).length === 1) {
+            mainArcLabelLine.style("display", "none");
+        }
+        else {
+            mainArcLabelLine
+                .style("fill", function (d) { return config.color_pattern.length > 0 ? $$.levelColor(d.data.values[0].value) : $$.color(d.data); })
+                .style("display", config.gauge_labelLine_show ? "" : "none")
+                .each(function (d) {
+                    var lineLength = 0, lineThickness = 2, x = 0, y = 0, transform = "";
+                    if ($$.hiddenTargetIds.indexOf(d.data.id) < 0) {
+                        var updated = $$.updateAngle(d),
+                            innerLineLength = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length * (updated.index + 1),
+                            lineAngle = updated.endAngle - Math.PI / 2,
+                            arcInnerRadius = $$.radius - innerLineLength,
+                            linePositioningAngle = lineAngle - (arcInnerRadius === 0 ? 0 : (1 / arcInnerRadius));
+                        lineLength = $$.radiusExpanded - $$.radius + innerLineLength;
+                        x = Math.cos(linePositioningAngle) * arcInnerRadius;
+                        y = Math.sin(linePositioningAngle) * arcInnerRadius;
+                        transform = "rotate(" + (lineAngle * 180 / Math.PI) + ", " + x + ", " + y + ")";
+                    }
+                    d3.select(this)
+                        .attr({ x: x, y: y, width: lineLength, height: lineThickness, transform: transform })
+                        .style("stroke-dasharray", "0, " + (lineLength + lineThickness) + ", 0");
+                });
+        }
+    }
     mainArc
         .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
         .on('mouseover', config.interaction_enabled ? function (d) {
@@ -393,22 +444,31 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         .attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS.gaugeValue : ''; })
         .text($$.textForArcLabel.bind($$))
         .attr("transform", $$.transformForArcLabel.bind($$))
-        .style('font-size', function (d) { return $$.isGaugeType(d.data) ? Math.round($$.radius / 5) + 'px' : ''; })
+        .style('font-size', function (d) { return $$.isGaugeType(d.data) && $$.filterTargetsToShow($$.data.targets).length === 1 ? Math.round($$.radius / 5) + 'px' : ''; })
       .transition().duration(duration)
         .style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; });
     main.select('.' + CLASS.chartArcsTitle)
-        .style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0);
+        .style("opacity", $$.hasType('donut') || hasGaugeType ? 1 : 0);
+
+    if (hasGaugeType) {
+        var index = 0;
+        backgroundArc = $$.arcs.select('g.' + CLASS.chartArcsBackground).selectAll('path.' + CLASS.chartArcsBackground).data($$.data.targets);
+        backgroundArc.enter().append("path");
+        backgroundArc
+            .attr("class", function (d, i) { return CLASS.chartArcsBackground + ' ' + CLASS.chartArcsBackground +'-'+ i; })
+            .attr("d", function (d1) {
+                if ($$.hiddenTargetIds.indexOf(d1.id) >= 0) { return "M 0 0"; }
 
-    if ($$.hasType('gauge')) {
-        $$.arcs.select('.' + CLASS.chartArcsBackground)
-            .attr("d", function () {
                 var d = {
                     data: [{value: config.gauge_max}],
                     startAngle: config.gauge_startingAngle,
-                    endAngle: -1 * config.gauge_startingAngle * (config.gauge_fullCircle ? Math.PI : 1)
+                    endAngle: -1 * config.gauge_startingAngle * (config.gauge_fullCircle ? Math.PI : 1),
+                    index: index++
                 };
                 return $$.getArc(d, true, true);
             });
+        backgroundArc.exit().remove();
+
         $$.arcs.select('.' + CLASS.chartArcsGaugeUnit)
             .attr("dy", ".75em")
             .text(config.gauge_label_show ? config.gauge_units : '');
@@ -425,7 +485,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
 c3_chart_internal_fn.initGauge = function () {
     var arcs = this.arcs;
     if (this.hasType('gauge')) {
-        arcs.append('path')
+        arcs.append('g')
             .attr("class", CLASS.chartArcsBackground);
         arcs.append("text")
             .attr("class", CLASS.chartArcsGaugeUnit)

src/class.js

@@ -39,6 +39,7 @@ export default {
     circle: 'c3-circle',
     circles: 'c3-circles',
     arc: 'c3-arc',
+    arcLabelLine: 'c3-arc-label-line',
     arcs: 'c3-arcs',
     area: 'c3-area',
     areas: 'c3-areas',

src/config.js

@@ -184,6 +184,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         // gauge
         gauge_fullCircle: false,
         gauge_label_show: true,
+        gauge_labelLine_show: true,
         gauge_label_format: undefined,
         gauge_min: 0,
         gauge_max: 100,
@@ -191,6 +192,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         gauge_label_extents: undefined,
         gauge_units: undefined,
         gauge_width: undefined,
+        gauge_arcs_minWidth: 5,
         gauge_expand: {},
         gauge_expand_duration: 50,
         // donut

src/core.js

@@ -205,11 +205,6 @@ c3_chart_internal_fn.initWithData = function (data) {
         $$.addHiddenLegendIds(config.legend_hide === true ? $$.mapToIds($$.data.targets) : config.legend_hide);
     }
 
-    // when gauge, hide legend // TODO: fix
-    if ($$.hasType('gauge')) {
-        config.legend_show = false;
-    }
-
     // Init sizes and scales
     $$.updateSizes();
     $$.updateScales();
@@ -761,7 +756,7 @@ c3_chart_internal_fn.getTranslate = function (target) {
         y = config.axis_rotated ? 0 : $$.height2;
     } else if (target === 'arc') {
         x = $$.arcWidth / 2;
-        y = $$.arcHeight / 2;
+        y = $$.arcHeight / 2 - ($$.hasType('gauge') ? 6 : 0);// to prevent wrong display of min and max label
     }
     return "translate(" + x + "," + y + ")";
 };

src/legend.js

@@ -311,7 +311,9 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
     tiles = $$.legend.selectAll('line.' + CLASS.legendItemTile)
             .data(targetIds);
         (withTransition ? tiles.transition() : tiles)
-            .style('stroke', $$.color)
+            .style('stroke', $$.levelColor ? function(id) {
+                return $$.levelColor($$.cache[id].values[0].value);
+            } : $$.color)
             .attr('x1', x1ForLegendTile)
             .attr('y1', yForLegendTile)
             .attr('x2', x2ForLegendTile)

src/scss/arc.scss

@@ -5,7 +5,7 @@
 
 .c3-chart-arcs .c3-chart-arcs-background {
   fill: #e0e0e0;
-  stroke: none;
+  stroke: #FFF;
 }
 .c3-chart-arcs .c3-chart-arcs-gauge-unit {
   fill: #000;

src/scss/chart.scss

@@ -22,8 +22,13 @@
 
 .c3-chart-arc path {
   stroke: #fff;
+}
 
+.c3-chart-arc rect {
+    stroke: white;
+    stroke-width: 1;
 }
+
 .c3-chart-arc text {
   fill: #fff;
   font-size: 13px;

src/tooltip.js

@@ -140,7 +140,7 @@ c3_chart_internal_fn.tooltipPosition = function (dataToShow, tWidth, tHeight, el
   // Determin tooltip position
     if (forArc) {
         tooltipLeft = (($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2) + mouse[0];
-        tooltipTop = ($$.height / 2) + mouse[1] + 20;
+        tooltipTop = ($$.hasType('gauge') ? $$.height : $$.height / 2) + mouse[1] + 20;
     } else {
         svgLeft = $$.getSvgLeft(true);
         if (config.axis_rotated) {