Chart.js show tooltips on page load

Question

I am using http://www.chartjs.org/ to display a pie chart but can't seem to figure out how to display the tooltips on page load.

$(document).on('ready page:load', function() {

    Chart.defaults.global.tooltipEvents = ['click', 'mousemove', 'window.onload'];
    Chart.defaults.global.customTooltips = function(tooltip) {
        var text = tooltip.text;
        var tooltipEl = $('#chartjs-tooltip');

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

        if(text) {
            var id = text.split(":")[0].replace(/ /g, '-').toLowerCase();
            $('.tip-text').addClass('hide');
            $('#'+id+'-tip').removeClass('hide').show();
        }

        // Set caret Position
        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);
        // Set Text
        tooltipEl.html(tooltip.text.split(":")[0]);
        // Find Y Location on page
        var top;
        if (tooltip.yAlign == 'above') {
            top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
        } else {
            top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
        }
        // Display, position, and set styles for font
        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + top + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }

    var body = $('body');

    if(body.is(".home")) {
        var ctx1 = $("#custom-research-chart").get(0).getContext("2d");
        var data = [
            {
                value: 250,
                color:"#7ad3f7",
                highlight: "#7ad3f7",
                label: "GROWTH OVER TIME",
                labelColor: "white",
                labelFontSize: "16"
            },
            {
                value: 250,
                color:"#9e062e",
                highlight: "#9e062e",
                label: "INNOVATION",
                labelColor: "white",
                labelFontSize: "16"
            },
            {
                value: 250,
                color:"#577e7e",
                highlight: "#577e7e",
                label: "DEVELOPMENT",
                labelColor: "white",
                labelFontSize: "16"
            },
            {
                value: 250,
                color:"#f28d1e",
                highlight: "#f28d1e",
                label: "MARKET RESEARCH",
                labelColor: "white",
                labelFontSize: "16"
            },
        ];
        var customResearch = new Chart(ctx1).Doughnut(data);

        $('.various').fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            width       : '70%',
            height      : '70%',
            openEffect  : 'none'
        });

        $.force_appear();

        $(document.body).on('appear', '#alicia', function(e, $affected) {
            console.log("HEY")
        });
    }

});

score 2 · Accepted Answer · answered Feb 25 '15 at 17:06

2

A quick way to do this is to turn tooltips off (so that the chart does not redraw when the mouse is over it) and turn animation off (so that again the chart does not wipe the tool tips off the chart when being redrawn). Then you can manually call the showTooltip method of the chart passing it the segments.

If you want to keep animations you would need to have a listener for the end of the animation but i can;t seem to find any documentation on that event being fired (it may not exist)

var data = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
}, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}]


//canvases
var chart = document.getElementById("chart").getContext("2d");

//charts
var myChart = new Chart(chart).Doughnut(data, {
    animation:false,
    showTooltips: false,
});
myChart.showTooltip(myChart.segments);

<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="chart"></canvas>

This is a quick way as it doesn't give much control on the position of the tool tips and if you have a lot of data in your pie they may overlap.

answered Feb 25 '15 at 17:06

Quince

14,790
6
60
69

This works great! Do you know of a way to actually display the tooltip content on the segment the label belongs to instead of in the tooltip? @Quince – dennismonsewicz Feb 27 '15 at 03:00
sorry no, but if i f do find a way ill let you know – Quince Feb 27 '15 at 08:26
In the meantime it is possible to keep the animation. Have a look here: http://stackoverflow.com/questions/25661197/chart-js-doughnut-show-tooltips-always – LarsBauer Apr 04 '15 at 13:19
Ah sweet that's what I was looking for. Thought it was an event though. Yes this is the best way to achieve this. – Quince Apr 04 '15 at 21:02
This doesn't seem to work with line charts, it throws "Uncaught TypeError: Cannot read property 'length' of undefined" but works fine with pie charts – user1130176 Apr 09 '15 at 12:18
@user1130176 try it with `myChart.points` instead of segments for line charts as that is where the data is held – Quince Apr 09 '15 at 12:20
myChart.showTooltip(myChart.points); same error, thx for reply though. – user1130176 Apr 09 '15 at 16:35
ah ok sorry just checked try `myChart.datasets[0].points` http://fiddle.jshell.net/leighking2/yt809p3e/ – Quince Apr 09 '15 at 18:20
Your code is not working for me. Could you tell me how can I fix this? – Leroy Alonzo Jan 19 '20 at 16:19
this is from an old version of chart js in the 1.x range, chart js has been on 2.x for some time now so id say the issue is prob using this answer with 2.x. if you are using 1.x I'd recommend upgrading to 2.x – Quince Jan 20 '20 at 08:25
I can't find any `showTooltip()` on the created chart. – Damien Cassou Feb 08 '22 at 08:52

Chart.js show tooltips on page load

1 Answers1

Linked