When I change the color for a line in a graph, the legend does not update with the same color. It stays the same as default color. Is there something I need to do to update the color in the legend to display the same color as the graph?
Both the code and the jsfiddle is the same example.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flotr2 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flotr2.min.js"></script>
</head>
<body>
<div id="container" style="width:840px;height:400px"></div>
<script>
var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
var container = document.getElementById('container');
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container,
[{"label": "d1", "lines": {"lineWidth": "1", "color": "#f00"}, "data": d1}, {"label": "d2", "data": d2}], {
title: "Flotr2 test",
subtitle: "Subtitle",
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
},
legend: {
position: 'ne'
}
});
</script>
You are changing color of just the line in your code:
{"label" : "d1","lines" : {"lineWidth" : "1", "color" : "#f00"}, "data" : d1}Try to change the color of the data set:
{"label": "d1", "lines": {"lineWidth": "1"}, "data": d1, "color": "#F00"}See: http://jsfiddle.net/ye0ny57j/9/