score:3

Accepted answer

if you want to have the tooltip of the same color as your legend, you need to modify the pointcoloroptions.

find my fiddle ;).

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 class=\"<%=name.tolowercase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokecolor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
    beziercurve: false,
    multitooltiptemplate: "<%= datasetlabel %> - <%= value %>",
});

var legend = myline.generatelegend();
document.getelementbyid("legend").innerhtml = legend;

Related Query

More Query from same tag