how to show multiple values in point hover using chart.js

Question

I want to know that if it is possible to show more values on point hover in chart.js.

Have a look in this fiddle. This is a smiple graph example taken from the chart.js site. If i hover a point it shows the dataset value.

How can i show other value. like along this array.

[65, 59, 80, 81, 56, 55, 40]

if i want to show this array values [1, 2, 3, 4, 5, 6, 7]. Like i want to show numbering. This is just an example actually i want to show more two values but not want to plot it on the graph only showed in the pointhover. Like on 65 it tells that it is 1th value.

Any kind of help would be much appreciated.

Solution 1

Yes it is possible, please use tooltips option as below

var ctx = document.getElementById('chart1').getContext("2d");
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};



var options = {
        responsive: true,
        title: {
            display: true,
            position: "top",
            text: 'anything',
            fontSize: 18,
            fontColor: "#111"
        },
        tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                       var multistringText = [tooltipItems.yLabel];
                           multistringText.push('Another Item');
                           multistringText.push(tooltipItems.index+1);
                           multistringText.push('One more Item');
                        return multistringText;
                    }
                }
            },
        legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
        },
        scales:{
            yAxes:[{
                ticks:{
                    min:0

                }
            }]

        }
    };
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="chart1"></canvas>

Solution 2

tooltips: { mode: 'index' }

add this to options

Solution 3

If you want to show data below the existing item in the tooltips you can use the 3 different tooltip footer callbacks. Just define what you want to show as arrays outside of the scope of chart.js and reference it using an index.

tooltips: {
    enabled: true,
    mode: 'single',
    callbacks: {
        beforeFooter: function(tooltipItems, data) { 
          return 'Point #: ' + footerLine1[tooltipItems[0].index];
        },
        footer: function(tooltipItems, data) { 
          return 'Other Data: ' + footerLine2[tooltipItems[0].index];
        }
    }
},

Keep in mind that you only have 3 lines to work with (e.g. 3 footer callbacks)

See the example here.

Comments

[tech_geek]

it is acutally appending a line to every tootltip . Did you see like on first tooltip it shows 65 i like to show like that. in the same tooltip under the 65 it should show 1 and on the next it should show 2

[Kuldeep Singh]

Updated my answer. Hope this will help. Though it depends upon you logic what you want to display. You can display anything if you have the callback handle.

[tech_geek]

is it not possible to have this in next line like the data array value? also what if i have 3 to 4 more things to show

[tech_geek]

i understand this but this is itself a function that we are adding a index. what if i have 2 array like this [1,2,3,4,5,6] and [4,5,6,9,3,7] and i want to show this both in that tool tip i hope you understand what i am asking

[Kuldeep Singh]

Ahh you want line break in tooltip, yes possible let me update answer

[tech_geek]

let me check it on my project. if it is possible to use data from the array. Thankx you! just let me check

[tech_geek]

yeah this is good. plz tell me .index automatically index the array which is given to him?

[jordanwillis]

Yes that's correct. Its the data index that the tooltip used to generate itself. It always maps back to a index in your data array.

[Kuldeep Singh]

Yes it is possible to use 'data' object, if you see data object is available in the callback along with 'tooltipItems' object

[tech_geek]

yes i m checking like the jordan used the array. allow me to combine that array call to your code.

[tech_geek]

Thank you very much @kuldeep mcuh help provided.

[tech_geek]

@jordan2illis thank you man! i hope i can accept two answers. thankx

[Pat Doyle]

Very helpful! Thanks alot. This worked great for me.