CODEWITHSUNDEEP
javascriptpythonchart.js
h.and.h
h.and.h

Reputation: 776

Tooltips not working in chart.js. Any ideas?

The tooltips aren't showing in my chart. Can you see why?

<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js'></script>


<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            // labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
            labels: [{% for item in labels %}
                    "{{item}}",
                   {% endfor %}],
            datasets: [
                {
                    data : [{% for item in values %}
                               {{item}},
                             {% endfor %}],
                    backgroundColor: 
                    [
                        "#2ecc71","#3498db","#95a5a6","#6dc066","#daa520",
                        "#9b59b6","#f1c40f","#e74c3c","#34495e","#008080",
                        "#ffc0cb","#d3ffce","#ff7373","#ffa500","#e6e6fa",
                        "#003366","#20b2aa","#c6e2ff","#008000"
                    ] 
                }
            ]
        },
        options: {
            responsive : true,
            showTooltips: true,
            scales: {
                yAxes: [
                    {
                        stacked: false
                    }
                ],   
                xAxes: [
                    {
                        ticks: {
                            autoSkip: true,
                            maxTicksLimit: 20
                        }
                    }
                ]
            }
        }
    });
</script>

Here's a photo of the chart (the top is chopped off a little). Everything else is working fine. The labels and data are sourced from a python script I'm running, and they're producing the expected result. It's just the tooltips I can't seem to get working.

Thanks for the help!

enter image description here

Upvotes: 0

Views: 8488

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

The issue is occurring because of the backgroundColor array. You can not use multiple colors array in a single data-set for line chart. Use an individual color instead.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
        datasets: [{
            data: [12, 23, 43, 34, 53, 47, 36],
            backgroundColor: '#3498db'
        }]
    },
    options: {
        responsive: true,
        showTooltips: true,
        scales: {
            yAxes: [{
                stacked: false
            }],
            xAxes: [{
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

Upvotes: 3

Related Questions