[Solved]-chart js tooltip how to control the data that show-Chart.js

you could extend the bar graph to include this functionality. by default it will return both bars at the index you have hovered over, it will also check for multiple bars at the area you hovered before creating the tooltip and put any extras in that were missing.

so to do this you will need to override two functions getbarsatevent and showtooltip here is an example and fiddle

i have tried to make it clear the two important areas that have changed look at the comments in the extended bar type. small changes were also made to any reference of the helpers as before they were within the scope but now they need to explicitly call chart.helpers

chart.types.bar.extend({

    name: "baronetip",
    initialize: function(data){
        chart.types.bar.prototype.initialize.apply(this, arguments);
    },
    getbarsatevent : function(e){
            var barsarray = [],
                eventposition = chart.helpers.getrelativeposition(e),
                datasetiterator = function(dataset){
                    barsarray.push(dataset.bars[barindex]);
                },
                barindex;

            for (var datasetindex = 0; datasetindex < this.datasets.length; datasetindex++) {
                for (barindex = 0; barindex < this.datasets[datasetindex].bars.length; barindex++) {
                    if (this.datasets[datasetindex].bars[barindex].inrange(eventposition.x,eventposition.y)){

                        //change here to only return the intrested bar not the group
                        barsarray.push(this.datasets[datasetindex].bars[barindex]);
                        return barsarray;
                    }
                }
            }

            return barsarray;
        },
    showtooltip : function(chartelements, forceredraw){
        console.log(chartelements);
            // only redraw the chart if we've actually changed what we're hovering on.
            if (typeof this.activeelements === 'undefined') this.activeelements = [];

            var ischanged = (function(elements){
                var changed = false;

                if (elements.length !== this.activeelements.length){
                    changed = true;
                    return changed;
                }

                chart.helpers.each(elements, function(element, index){
                    if (element !== this.activeelements[index]){
                        changed = true;
                    }
                }, this);
                return changed;
            }).call(this, chartelements);

            if (!ischanged && !forceredraw){
                return;
            }
            else{
                this.activeelements = chartelements;
            }
            this.draw();
            console.log(this)
            if (chartelements.length > 0){

                //removed the check for multiple bars at the index now just want one
                    chart.helpers.each(chartelements, function(element) {
                        var tooltipposition = element.tooltipposition();
                        new chart.tooltip({
                            x: math.round(tooltipposition.x),
                            y: math.round(tooltipposition.y),
                            xpadding: this.options.tooltipxpadding,
                            ypadding: this.options.tooltipypadding,
                            fillcolor: this.options.tooltipfillcolor,
                            textcolor: this.options.tooltipfontcolor,
                            fontfamily: this.options.tooltipfontfamily,
                            fontstyle: this.options.tooltipfontstyle,
                            fontsize: this.options.tooltipfontsize,
                            caretheight: this.options.tooltipcaretsize,
                            cornerradius: this.options.tooltipcornerradius,
                            text: chart.helpers.template(this.options.tooltiptemplate, element),
                            chart: this.chart
                        }).draw();
                    }, this);

            }
            return this;
        }

});

then to use it just do what you did before but use baronetip (call it whatever you like, what ever is in the name attribute of the extended chart will be available to you.

var ctx = document.getelementbyid("errorchart").getcontext("2d");
var data = {
    labels: ["january", "february", "march", "april", "may", "june", "july"],
    datasets: [
        {
            label: "my first dataset",
            fillcolor: "rgba(220,220,220,0.5)",
            strokecolor: "rgba(220,220,220,0.8)",
            highlightfill: "rgba(220,220,220,0.75)",
            highlightstroke: "rgba(220,220,220,1)",
            data: [65, 0, 0, 0, 0, 0, 0]
        },
        {
            label: "my second dataset",
            fillcolor: "rgba(151,187,205,0.5)",
            strokecolor: "rgba(151,187,205,0.8)",
            highlightfill: "rgba(151,187,205,0.75)",
            highlightstroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


var mybarchart = new chart(ctx).baronetip(data);

i should mention that if chartjs gets updated you would need to manually put any changes to the functions into the overridden ones