Dygraphs Change each series color

Question

I have a Line chart done with dygraphs, all the data is added using a Datatable so It has a variable number of series and data points.

All I want to do is to specify each series color. I know I can use an array in the constructor like this.

colors:
            ["#7FFF00", "#00FFFF", "#008080", "#00BFFF", "#FFD700", "#FF69B42", "#20B2AA",
             "#FF0000", "#FFFF00", "#FF1493", "#000080", "#00FF00", "#6B8E23", "#00FA9A",
             "#B0C4DE", "#F0E68C", "#DAA520"]
        ,

But as I said before the number of series is variable and unknown. I know I can update the options of a specific series like this:

g.updateOptions({
    'S1001': {
        strokeWidth: 10,
        drawPoints: true,
        pointSize: 4,
        highlightCircleSize: 6,

    }
});

Where S1001 is the name of the series, but I cant find any option to change its color.

How can I specify a series color if I know its Series ID?

Thanks in advance, Pablo

EDIT: Well I found a workaround that works quite well. I can change the colour of a series by setting the value in the "colorsMap_" and then redrawing the graph so:

g.colorsMap_["SeriesID"] = "#FFFFFF";

g.updateOptions("Any option so the graph is redrawn");

Is there any way of redrawing or refreshing the graph that not includes calling updateOptions?

thanks!

Answer 1

I came here while trying to solve this exact problem so I am adding a more up to date answer in the hope it helps someone else.

As of Dygraphs 2.0 (which contains breaking changes ) it is possible to format individual series.

You can set in your options the following:

{
    series: {
        mySeriesName: {
            color: "green",    //Accepts CSS colour values.

            //There are other properties you can set too:
            strokeWidth: 3,
            drawPoints: true,
            pointSize: 5,
            highlightCircleSize: 7
        }
    }
}

Replace 'mySeriesName' with the name given to a series in your CSV file or labels array.

You can try reading the documentation about series options but I don't personally find it all that clear. This demo was more helpful to me.

Answer 2

Maybe too late in answering but @pablito is correct that there should be an options of directly changing the color using updateOptions. Currently, this feature is not supported so we have to live with hacks. If we use the hack

g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});

as suggested above, it works but the problem is that Dygraph does not remember the changes once you zoom in or out. To make Dygraph remember the changes, implement the following

g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});
g.user_attrs_.colors[index] = "#FFFFFF"; // Where index is index number of the SeriesID
Dygraph.updateDeep(g.user_attrs_, g.user_attrs_);

Answer 3

You should define a greater number of colours than you have series in the initial constructor: extra entries beyond the number of series are ignored. later, when you add series, the extra colours will be used. Obviously, you will need to decide on some maximum number of series you want to handle.