score:0

first add this in html

<canvas id="mychart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

:js

var data = {
    labels: ["january", "february", "march", "april", "may", "june", "july"],
    datasets: [{
        label: "my first dataset",
        fillcolor: "rgba(220,220,220,0.2)",
        strokecolor: "rgba(220,220,220,1)",
        pointcolor: "rgba(220,220,220,1)",
        pointstrokecolor: "#fff",
        pointhighlightfill: "#fff",
        pointhighlightstroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

var mylinechart = new chart(ctx).line(data, {
    customtooltips: function (tooltip) {
        var tooltipel = $('#chartjs-tooltip');

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

        tooltipel.removeclass('above below');
        tooltipel.addclass(tooltip.yalign);

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split(":");
        var innerhtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
        tooltipel.html(innerhtml);

        tooltipel.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetleft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsettop + tooltip.y + 'px',
            fontfamily: tooltip.fontfamily,
            fontsize: tooltip.fontsize,
            fontstyle: tooltip.fontstyle,
        });
    }
});

and some styling stuff

:css

 #chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

score:0

(note that chart.js already adds tooltip text automatically; the question above is a bit unclear. what the question is about is how to add custom text to the tooltip, rather than just the defaults that it picks - the x and y values of the given point.) use the callbacks field in options.tooltips. note that the body of the tooltip is referred to as the "label".

tooltips: {
    intersect: false, // makes it easier to select tooltips on mobile
    callbacks: {
        title: (tooltipitem, data) => {
            let title = tooltipitem[0].x; // uses the x value of this point as the title
            return title;
        },
        label: (tooltipitem, data) => {
            let labels = data[tooltipitem.index!].labeltext; // assumes your data has a `labeltext` field.
            return labels;
        },
    },
},

note that some fields, like title, are passed an array of tooltipitem objects in their callback; others, like label, are passed a single object. hence, properties of the tooltipitem object must be accessed differently for each.

  • how to wrap long label lines? one way or the other, split up your labels into an array, and return that; each line in the array will be on a separate line. if the lines are still too long, you'll need to use a function to detect long lines and split them into additional array items.

Related Query

More Query from same tag