[Chartjs]-Chart.js show tooltips on page load

by

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.

Leave a comment