Chart.js : Multiple colors for tooltipFontColor

Different Colors for Toooltip Based on Value

Preview

Script

new Chart(ctx).Line(data, {
    // take over the tooltip binding
    tooltipEvents: [],
    onAnimationComplete: function () {
        // copy of chart.js binding except that ...
        Chart.helpers.bindEvents(this, ["mousemove", "touchstart", "touchmove"], function (evt) {
            var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
            this.eachPoints(function (point) {
                point.restore(['fillColor', 'strokeColor']);
            });
            Chart.helpers.each(activePoints, function (activePoint) {
                activePoint.fillColor = activePoint.highlightFill;
                activePoint.strokeColor = activePoint.highlightStroke;
            });
            // ... we set the font color before the tooltip is shown
            if (activePoints.length !== 0) {
                if (activePoints[0].value >= 0)
                    this.options.tooltipFontColor = "#FFF";
                else
                    this.options.tooltipFontColor = "#F00";
            }
            this.showTooltip(activePoints);
        });
    }
});

Fiddle – http://jsfiddle.net/uajz17yp/