javascriptdygraphs

dygraph change line color


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;
}

Solution

  • 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.