Chartjs-Highest (green) and Lowest (red) coordinates plot using Chart.Js

You can extend the chart to do 1., use the showScale option to do 2. and use DOM manipulation (or your javascript library if it supports it) to do 3.

Preview

HTML

...
<ul><li id="min"><span></span></li><li id="max"><span></span></li></ul>

CSS

#min, #max {
    float: left;
    margin-right: 2em;
    font-family: Verdana;
    font-size: 12px;
}
#min > span, #max > span {
    color: rgba(145,145,145,1);
}
#min {
    color: red;
}
#max {
    color: green;
}

Script

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var max = Math.max.apply(null, data.datasets[0].data);
        document.getElementById("max").firstChild.innerText = max;
        var min = Math.min.apply(null, data.datasets[0].data);
        document.getElementById("min").firstChild.innerText = min;
        this.datasets[0].points.forEach(function (point) {
            if (point.value === max)
                point._saved.fillColor = point.highlightFill = point.fillColor = 'green';
            else if (point.value === min)
                point._saved.fillColor = point.highlightFill = point.fillColor = 'red';
            else
                point.inRange = function() { return false }
        })
    }
});

and then

    ...
    showScale: false,
};

//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).LineAlt(lineData, lineOptions);

Fiddle – http://jsfiddle.net/py2mcfyk/2/