[Chartjs]-Chart.js v2: how to add tooltips of metadata?

by

2👍

✅

This is works for me. I created an array (myArr variable) into the tooltip.callbacks.label function, and appended the return value. I think, if you put your x.metadata values to myArr, it will be works.

var options = {
                    tooltips: {
                        enabled:false,
                        callbacks:{
                            label: function(tooltipItem, data) {
                                var myArr = [11,22,33,44,55]
                                var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                                //This will be the tooltip.body
                                return datasetLabel + ': ' + tooltipItem.yLabel +' :'+ myArr[tooltipItem.index];
                            },
                        },
                        custom: function(tooltip) {
                            var tooltipEl = $('#chartjs-tooltip');

                            if (!tooltip) {
                                tooltipEl.css({
                                    opacity: 0
                                });
                                return;
                            }

                            if (typeof  tooltip.body != 'undefined') {

                                var bodyText = tooltip.body[0].split(":");
                                var innerHtml = '<span class="chartjs-tooltip-header"><b>'+tooltip.title[0]+'</b></span><br>'
                                                +'<span>' + bodyText[0].trim() + '</span> : <span><b>' + bodyText[1].trim() +'</b></span>'
                                                +'<span>' + bodyText[2].trim() + '</span>';
                                tooltipEl.html(innerHtml);

                                tooltipEl.css({
                                    opacity: 1,
                                    left: (tooltip.xPadding * 3) + tooltip.x + 'px',
                                    top: (tooltip.yPadding * 3) + tooltip.y + 'px',
                                });

                            } 

                        }
                    }
                };

Leave a comment