[Chartjs]-ChartJS tooltip issue

by

0👍

Please check this (not showing tooltip on label hover) :

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Bar Chart</title>
<script src="https://www.chartjs.org/dist/2.9.2/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/master/utils.js"></script>
</head>

<body>
<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
    var color = Chart.helpers.color;
    var barChartData = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            tooltip:false,
            backgroundColor: 'green',
            borderColor: 'green',
            borderWidth: 1,
            
            data: [1000, 2000, 3000, 4000, 5000, 6000, 7500]
        }, {
            label: 'Dataset 2',
            type: 'line',
            fill: false,
            backgroundColor: 'red',
            borderColor: 'red',
            borderWidth: 2,
            data: [1060, 2110, 3098, 4010, 4020, 5010, 3030, ]
        }]
     
};
    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: 'Chart.js Bar Chart'
                }, tooltips: {
         intersect : false,
       filter: function (tooltipItem) {
            return tooltipItem.datasetIndex === 1;
        }
    }
            }
        });
    };
</script>
</body>

</html>

```

Leave a comment