Added option to only use x postion for tooltips (#2582)

c3js · May 29, 2019 · 1a65d19 · 1a65d19
1 parent 4853f57
commit 1a65d19
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/htdocs/index.html b/htdocs/index.html
@@ -315,6 +315,9 @@ <h3>Tooltip</h3>
               <a href="./samples/tooltip_grouped.html">
                 Show tooltip as each data
               </a>
+              <a href="./samples/tooltip_horizontal.html">
+                Show tooltip based on horizontal mouse position
+              </a>
             </div>
           </div>
         </div>

diff --git a/htdocs/samples/tooltip_horizontal.html b/htdocs/samples/tooltip_horizontal.html
@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+    <script src="../js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 80, 400, 500, 300, 80, 120, 30, 200, 100, 80, 400, 500, 300, 80],
+          ],
+        },
+        point: {
+          sensitivity: 300
+        },
+        tooltip: {
+          horizontal: true
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/config.js b/src/config.js
@@ -235,6 +235,7 @@ ChartInternal.prototype.getDefaultConfig = function () {
         tooltip_format_title: undefined,
         tooltip_format_name: undefined,
         tooltip_format_value: undefined,
+        tooltip_horizontal: undefined,
         tooltip_position: undefined,
         tooltip_contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
             return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : '';

diff --git a/src/data.js b/src/data.js
@@ -364,7 +364,7 @@ ChartInternal.prototype.findClosest = function (values, pos) {
     values.filter(function (v) {
         return v && !$$.isBarType(v.id);
     }).forEach(function (v) {
-        var d = $$.dist(v, pos);
+        var d = $$.config.tooltip_horizontal ? $$.horizontalDistance(v, pos) : $$.dist(v, pos);
         if (d < minDist) {
             minDist = d;
             closest = v;
@@ -382,6 +382,14 @@ ChartInternal.prototype.dist = function (data, pos) {
         x = $$.x(data.x);
     return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2));
 };
+ChartInternal.prototype.horizontalDistance = function(data, pos) {
+    var $$ = this,
+        config = $$.config,
+        xIndex = config.axis_rotated ? 1 : 0,
+        x = $$.x(data.x);
+
+    return Math.abs(x - pos[xIndex]);
+};
 ChartInternal.prototype.convertValuesToStep = function (values) {
     var converted = [].concat(values),
         i;