2👍
✅
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/
Source:stackexchange.com