]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Replace tooltip item xLabel and yLabel with label and value (#5996)
authorJukka Kurkela <jukka.kurkela@gmail.com>
Wed, 30 Jan 2019 10:41:19 +0000 (12:41 +0200)
committerSimon Brunel <simonbrunel@users.noreply.github.com>
Wed, 30 Jan 2019 10:41:19 +0000 (11:41 +0100)
docs/configuration/tooltip.md
src/controllers/controller.horizontalBar.js
src/core/core.tooltip.js

index 2014dcdac9ccc57ff91858937a714445e4c31955..0b9bf24385ebf1e469a77b6194965ff0cff5e6e6 100644 (file)
@@ -162,10 +162,18 @@ The tooltip items passed to the tooltip callbacks implement the following interf
 
 ```javascript
 {
-    // X Value of the tooltip as a string
+    // Label for the tooltip
+    label: string,
+
+    // Value for the tooltip
+    value: string,
+
+    // X Value of the tooltip
+    // (deprecated) use `value` or `label` instead
     xLabel: string,
 
-    // Y value of the tooltip as a string
+    // Y value of the tooltip
+    // (deprecated) use `value` or `label` instead
     yLabel: string,
 
     // Index of the dataset the item comes from
index 85d31ba515ed77aed7f07448daf3d68dde21e618..62bd07d3b83cfd0e456cff3b115363d7e9aacb64 100644 (file)
@@ -35,27 +35,6 @@ defaults._set('horizontalBar', {
        },
 
        tooltips: {
-               callbacks: {
-                       title: function(item, data) {
-                               // Pick first xLabel for now
-                               var title = '';
-
-                               if (item.length > 0) {
-                                       if (item[0].yLabel) {
-                                               title = item[0].yLabel;
-                                       } else if (data.labels.length > 0 && item[0].index < data.labels.length) {
-                                               title = data.labels[item[0].index];
-                                       }
-                               }
-
-                               return title;
-                       },
-
-                       label: function(item, data) {
-                               var datasetLabel = data.datasets[item.datasetIndex].label || '';
-                               return datasetLabel + ': ' + item.xLabel;
-                       }
-               },
                mode: 'index',
                axis: 'y'
        }
index a04bec3fb6d28181db14952a394d80e0ce2b5df1..1c260f3e9fc1df2567efd4bb7e3bc23c6b8d8b16 100644 (file)
@@ -40,15 +40,15 @@ defaults._set('global', {
                        // Args are: (tooltipItems, data)
                        beforeTitle: helpers.noop,
                        title: function(tooltipItems, data) {
-                               // Pick first xLabel for now
                                var title = '';
                                var labels = data.labels;
                                var labelCount = labels ? labels.length : 0;
 
                                if (tooltipItems.length > 0) {
                                        var item = tooltipItems[0];
-
-                                       if (item.xLabel) {
+                                       if (item.label) {
+                                               title = item.label;
+                                       } else if (item.xLabel) {
                                                title = item.xLabel;
                                        } else if (labelCount > 0 && item.index < labelCount) {
                                                title = labels[item.index];
@@ -70,7 +70,11 @@ defaults._set('global', {
                                if (label) {
                                        label += ': ';
                                }
-                               label += tooltipItem.yLabel;
+                               if (!helpers.isNullOrUndef(tooltipItem.value)) {
+                                       label += tooltipItem.value;
+                               } else {
+                                       label += tooltipItem.yLabel;
+                               }
                                return label;
                        },
                        labelColor: function(tooltipItem, chart) {
@@ -206,10 +210,15 @@ function createTooltipItem(element) {
        var yScale = element._yScale || element._scale; // handle radar || polarArea charts
        var index = element._index;
        var datasetIndex = element._datasetIndex;
+       var controller = element._chart.getDatasetMeta(datasetIndex).controller;
+       var indexScale = controller._getIndexScale();
+       var valueScale = controller._getValueScale();
 
        return {
                xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '',
                yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '',
+               label: indexScale ? indexScale.getLabelForIndex(index, datasetIndex) : '',
+               value: valueScale ? valueScale.getLabelForIndex(index, datasetIndex) : '',
                index: index,
                datasetIndex: datasetIndex,
                x: element._model.x,