JSFiddle - React, Tailwind, and code Playground

by Leigh Quince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="chart" width="600px"></canvas>

JavaScript

Chart.types.Line.extend({

    name: "LineTooltip",
    /*
     * we have to add one item in the init so need to rewrite it again here with the one edit
     */
    initialize: function (data) {
        //have to get the helpers as we are using this outside chart where it was declared
        var helpers = Chart.helpers;
        //Declare the extension of the default point, to cater for the options passed in to the constructor
        this.PointClass = Chart.Point.extend({
            strokeWidth: this.options.pointDotStrokeWidth,
            radius: this.options.pointDotRadius,
            display: this.options.pointDot,
            hitDetectionRadius: this.options.pointHitDetectionRadius,
            ctx: this.chart.ctx,
            inRange: function (mouseX) {
                return (Math.pow(mouseX - this.x, 2) < Math.pow(this.radius + this.hitDetectionRadius, 2));
            }
        });

        this.datasets = [];

        //Set up tooltip events on the chart
        if (this.options.showTooltips) {
            helpers.bindEvents(this, this.options.tooltipEvents, function (evt) {
                var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
                this.eachPoints(function (point) {
                    point.restore(['fillColor', 'strokeColor']);
                });
                helpers.each(activePoints, function (activePoint) {
                    activePoint.fillColor = activePoint.highlightFill;
                    activePoint.strokeColor = activePoint.highlightStroke;
                });
                this.showTooltip(activePoints);
            });
        }

        //Iterate through each of the datasets, and build this into a property of the chart
        helpers.each(data.datasets, function (dataset) {
            var datasetObject = {
                label: dataset.label || null,
                fillColor: dataset.fillColor,
                strokeColor: dataset.strokeColor,
               ...