]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Tooltip label callback example (#5168)
authorEvert Timberg <evert.timberg+github@gmail.com>
Sun, 21 Jan 2018 21:47:04 +0000 (16:47 -0500)
committerGitHub <noreply@github.com>
Sun, 21 Jan 2018 21:47:04 +0000 (16:47 -0500)
docs/configuration/tooltip.md

index 1be2c26bc0edc8ced296a57dc82ddfca88de7d04..9990fc9161f671d7d3251d638efecea2701a720b 100644 (file)
@@ -103,6 +103,32 @@ All functions are called with the same arguments: a [tooltip item](#tooltip-item
 | `footer` | `Array[tooltipItem], data` | Returns text to render as the footer of the tooltip.
 | `afterFooter` | `Array[tooltipItem], data` | Text to render after the footer section
 
+### Label Callback
+
+The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            callbacks: {
+                label: function(tooltipItem, data) {
+                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
+
+                    if (label) {
+                        label += ': ';
+                    }
+                    label += Math.round(tooltipItem.yLabel * 100) / 100;
+                    return label;
+                }
+            }
+        }
+    }
+});
+```
+
 ### Label Color Callback
 
 For example, to return a red box for each item in the tooltip you could do: