CODEWITHSUNDEEP
tooltipchart.js
LeBlaireau
LeBlaireau

Reputation: 17467

No tooltips on Chart JS line graph

I must be missing something obvious but I can't get tooltips to work on this chartjs line graph. Do I have to tune them on in some way?

 Chart.defaults.global.defaultFontColor = '#FFF';

            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                   // labels: chartdata.labels,
                   // datasets: dataset
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                '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)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
                },
                options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true
                                    }
                                }]
                            },
                            title: {
                                display: true,
                                text: 'Custom Chart Title'
                            },
                             legend: {
                                display:false,
                            },
                             tooltips: {
                    mode: 'label',


                        },
                hover: {
                    mode: 'label'
                },
                }

            });

Upvotes: 1

Views: 1614

Answers (1)

tektiv
tektiv

Reputation: 14187

In Chart.js, array of colors for the backgroundColor and borderColor properties are for bar-type charts for instance, since you have different elements in your graph (several bars).

In the line-type, you only have one element (the line, with the fill below), so you need to set these properties with a single color.

If you change these properties to :

datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1
}]

You will get the following result, which you can check at this fiddle :

enter image description here

Upvotes: 2

Related Questions