I want to change line color off a dygraph chart
with value.
Example when my data is greater than 2, I want to change the color.
I try option color, but is change just the point color.
I make a JsFiddle here.
This is my option dygraph:
color: function (color, d) {
if (typeof d.index === 'undefined') { return color; }
var val = columns[0][d.index + 1];
if (val >= 0 && val <= 150) {
color = 'green';
} else if (val > 150 && val <= 300) {
color = 'yellow';
} else if (val > 300) {
color = 'red';
}
return color;
}
As you've discovered, you can't set color
to a function. You can use the slightly more general drawPointCallback
option, though, which lets you draw any shape with any color for each point:
function coloredCircle(g, series, ctx, cx, cy, color, radius, idx) {
var y = g.getValue(idx, 1);
var pointColor = y < 5 ? 'green' : 'blue';
ctx.save();
ctx.fillStyle = pointColor;
ctx.beginPath();
ctx.arc(cx, cy, radius, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
}
g = new Dygraph(
div, data,
{
series: {
Y: {
drawPointCallback: coloredCircle,
pointSize: 5,
drawPoints: true
}
}
});
Here's a fully-worked fiddle. See the custom-circles demo for more examples of drawPointCallback
.