Search code examples
javascriptdygraphs

Automatic different colors for multiple plots?


I'm using dygraphs.js to render some plot. Using mutliple series in one plot, these series will get different colors, which all fit very well together (so dygraphs has a great color palette). However, if I use multiple plots, every plot has the same color (with just one series).

I would like to use the dygraphs color palette for every plot, so that the colors are the same as the automatic ones - is there a way to access the dygraphs color palette, preferably with integer indexing, since I don't know beforehand how many plots there will be?

E.g. with 4 plots I want to use the 4 first colors from dygraph, with 10 the first 10.. as in one plot with multiple series.


Solution

  • The code that defines the standard color palette is here. Here's the gist:

    var colors = [];
    var half = Math.ceil(numSeries / 2);
    for (var i = 0; i < numSeries; i++) {
      // alternate colors for high contrast.
      var idx = i % 2 ? (half + (i + 1)/ 2) : Math.ceil((i + 1) / 2);
      var hue = (1.0 * idx / (1 + numSeries));
      colorStr = Dygraph.hsvToRGB(hue, sat, val);
      colors.push(colorStr);
    }
    

    Your best bet is to create an array of colors and use the colors option to set a different one for each plot.