javascript - 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='.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!

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./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>

Thanks for the help!

Share Improve this question asked Apr 24, 2017 at 19:36 h.and.h 7761 gold badge9 silver badges32 bronze badges

1 Not 100% sure, but it may be due to the missing "label" option from your dataset. Try adding a label inside your dataset to see if it fixes. – Z. Bagley Commented Apr 24, 2017 at 19:43
My problem was caused by the shared config variable: stackoverflow./a/47519851/722036 – ᴍᴇʜᴏᴠ Commented Nov 27, 2017 at 21:11

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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./ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Tooltips not working in chart.js. Any ideas? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)