Fix data label position when brushed - #485

10 years ago · 805b15a3b8
4 changed files with 29 additions and 7 deletions
--- a/c3.js
+++ b/c3.js
@ -2983,7 +2983,7 @@
        } else {
            xPos = $$.hasType('bar') ? (points[2][0] + points[0][0]) / 2 : points[0][0];
        }
-        return xPos > $$.width ? $$.width - box.width : xPos;
+        return d.value !== null ? xPos : xPos > $$.width ? $$.width - box.width : xPos;
    };
    c3_chart_internal_fn.getYForText = function (points, d, textElement) {
        var $$ = this,
@ -2993,7 +2993,7 @@
        } else {
            yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
        }
-        return yPos < box.height ? box.height : yPos;
+        return d.value !== null ? yPos : yPos < box.height ? box.height : yPos;
    };

    c3_chart_internal_fn.setTargetType = function (targetIds, type) {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/subchart.html
+++ b/htdocs/samples/subchart.html
@ -3,22 +3,44 @@
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
-    <div id="chart"></div>
+    <div id="chart1"></div>
+    <div id="chart2"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script>
-      var chart = c3.generate({
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          labels: true
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
+          labels: true
        },
        subchart: {
          show: true
+        },
+        axis: {
+          rotated: true
        }
      });
+
    </script>
  </body>
 </html>
--- a/src/text.js
+++ b/src/text.js
@ -77,7 +77,7 @@ c3_chart_internal_fn.getXForText = function (points, d, textElement) {
    } else {
        xPos = $$.hasType('bar') ? (points[2][0] + points[0][0]) / 2 : points[0][0];
    }
-    return xPos > $$.width ? $$.width - box.width : xPos;
+    return d.value !== null ? xPos : xPos > $$.width ? $$.width - box.width : xPos;
 };
 c3_chart_internal_fn.getYForText = function (points, d, textElement) {
    var $$ = this,
@ -87,5 +87,5 @@ c3_chart_internal_fn.getYForText = function (points, d, textElement) {
    } else {
        yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
    }
-    return yPos < box.height ? box.height : yPos;
+    return d.value !== null ? yPos : yPos < box.height ? box.height : yPos;
 };