From d668882971166ac11768ab659b2d5770642c33b3 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sun, 21 Jan 2018 16:47:04 -0500 Subject: [PATCH] Tooltip label callback example (#5168) --- docs/configuration/tooltip.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 1be2c26bc..9990fc916 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -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: