Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 568
tech_geek Avatar asked Mar 16 '17 16:03

tech_geek


3 Answers

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>
like image 66
Kuldeep Singh Avatar answered Oct 18 '22 11:10

Kuldeep Singh


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.

like image 1
jordanwillis Avatar answered Oct 18 '22 11:10

jordanwillis


tooltips: { mode: 'index' }

add this to options

like image 1
Rasheed Avatar answered Oct 18 '22 09:10

Rasheed