Stackoverflow answer 20150605

My answer to http://stackoverflow.com/questions/30661459/how-to-set-color-for-each-item-in-tooltip-with-chartjs/30661742#30661742

HTML

<script src="http://yourjavascript.com/41704451561/chart-min.js"></script>
<div style="width:30%">
    <div>
        <canvas id="canvas" height="300" width="450"></canvas>
    </div>
</div>

CSS

.line-legend li span {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px;
}
.line-legend {
    list-style: none;
}

JavaScript

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100);
};
var lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(255, 0, 0, 0.0)", //"rgba(220,220,220,0.2)",
        strokeColor: "red", //"rgba(220,220,220,1)",
        pointColor: "red", //"rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(0, 0, 255, 0.0)", //"rgba(151,187,205,0.2)",
        strokeColor: "blue", //"rgba(151,187,205,1)",
        pointColor: "blue", //"rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        label: "My Third dataset",
        fillColor: "rgba(0, 255, 0, 0.0)", //"rgba(100,100,205,0.2)",
        strokeColor: "green", //"rgba(151,187,205,1)",
        pointColor: "green", //"rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
    legendTemplate: "<ul><% for (var i=0; i<datasets.length; i++){%><li><span...