JSFiddle - React, Tailwind, and code Playground

by Leigh Quince

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="errorChart"></canvas>

JavaScript

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