[Chartjs]-How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?

by

2👍

✅

Customized Multiline Tooltip in ChartJS:

<!DOCTYPE html>
                <!--
                homt.html
                -->
                <html>
                    <head>
                        <title>Customised tooltip</title>
                        <!--ChartJs-->
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
                        <!--ChartJs-->
                        <style>
                div {
                  height: 600px;
                  width: 700px;
                }
                </style>
                    </head>
                    <body>
                        <div id="myCan" >
                            <canvas id="bar"></canvas>
                        </div>
                    </body>
                    <script type="text/javascript">
                        var dataJason = {
                    "meth": [{
                        "tech": "CSS", "avg": 3, "Count": 80, "sum": 53
                    },
                    {
                        "tech": "CCS", "avg": 9, "Count": 70, "sum": 25
                    },
                    {
                        "tech": "CSC", "avg": 7, "Count": 50, "sum": 66
                    }]
                };

                var techDATA = [];
                var countDATA = [];
                var avgDATA = [];
                var sumDATA = [];
                function techData(){
                    var jdata = dataJason.meth;
                    var jl = jdata.length;
                    for(var i = 0; i < jl; i++){
                        techDATA.push(dataJason.meth[i].tech);
                        countDATA.push(dataJason.meth[i].Count);
                        avgDATA.push(dataJason.meth[i].avg);
                        sumDATA.push(dataJason.meth[i].sum);
                    }
                }

                var colorCode = ['#5DADE2','#F1C40F','#00FFFF','#A569BD','#F5B041','#566573'];

                function init(){
                    techData();
                    var ctx1 = document.getElementById("bar").getContext('2d');
                    var myChart1 = new Chart(ctx1, {
                                type: 'bar',  
                            options: {
                                legend: {
                                display: false
                            },
                                tooltips: {
                                    callbacks: {
                                        beforeLabel: function(tooltipItem, data){
                                            var dataset = data.datasets[tooltipItem.datasetIndex];
                                            return data.datasets[tooltipItem.datasetIndex].label+ ' : '+dataset.data[tooltipItem.index]+"%";
                                        },
                                        label: function(tooltipItem, data) {
                                            var avg = "Avg: "+avgDATA[tooltipItem.index];
                                            return avg;
                                        },
                                        afterLabel: function(tooltipItem, data){
                                            var sum = "Sum: "+sumDATA[tooltipItem.index];
                                            return sum;
                                        }
                                    }
                                }, 
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true, steps: 10, stepValue: 5, max: 100
                                        }
                                    }]
                                }
                            }, 
                            data: {
                                labels: techDATA, datasets: [{
                                    backgroundColor: colorCode, label: 'Method Covered', data: countDATA
                                }]
                            }
                       }
                   );
                }

                window.onload = function(){
                  init();  
                };

                    </script>
                </html>

******Output******

3👍

The graph with custom tool tip using chartjs.

tooltipgraph

JavaScript code.

//
// appcharts.js

//alert("ToolTips");
//var countDATAt = [80, 70, 50];
//var techDATAt = ["CSS", "CCS", "CSC"];
//var avgDATAt = [3, 9, 7];
//var sumDATAt = [53, 25, 66];
var dataJason = {
    "meth": [{
        "tech": "CSS", "avg": 3, "Count": 80, "sum": 53
    },
    {
        "tech": "CCS", "avg": 9, "Count": 70, "sum": 25
    },
    {
        "tech": "CSC", "avg": 7, "Count": 50, "sum": 66
    }]
};

var techDATA = [];
var countDATA = [];
var avgDATA = [];
var sumDATA = [];
function techData(){
    var jdata = dataJason.meth;
    var jl = jdata.length;
    for(var i = 0; i < jl; i++){
        techDATA.push(dataJason.meth[i].tech);
        countDATA.push(dataJason.meth[i].Count);
        avgDATA.push(dataJason.meth[i].avg);
        sumDATA.push(dataJason.meth[i].sum);
    }
}

var colorCode = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
];

function init(){
    techData();
    var ctx1 = document.getElementById("bar").getContext('2d');
    var myChart1 = new Chart(ctx1, {
                type: 'bar', legend: {
                display: true
            }, 
            options: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var avg = ", avg: "+avgDATA[tooltipItem.index];
                            var sum = ", sum: "+sumDATA[tooltipItem.index];
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            return data.datasets[tooltipItem.datasetIndex].label+ ' : '+dataset.data[tooltipItem.index]+"%"+avg+sum;
                        }
                    }
                }, 
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true, steps: 10, stepValue: 5, max: 100
                        }
                    }]
                }
            }, 
            data: {
                labels: techDATA, datasets: [{
                    backgroundColor: colorCode, label: 'Method Covered', data: countDATA
                }]
            }
       }
   );
}

window.onload = function(){
  init();  
};

//alert("Done");

//

HTML code.

<!DOCTYPE html>
<!--
index.html
-->
<html>
    <head>
        <title>Custom tooltip</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="lib/charts/Chart.bundle.js"></script>
        <script src="js/appcharts.js"></script>
    </head>
    <body>
        <br><hr><br>
        <div id="myCan">
            <canvas id="bar" width="100" height="100"></canvas>
        </div>
        <br><hr><br>
    </body>
</html>

Enjoy.

Leave a comment