javascriptdygraphs

individual axis label color with Dygraphs 2.2.1 in multiple graphs

Using CSS setting up a color for y-label or y2-label as described at dygraphs CSS reference works very well, example: .dygraph-ylabel{ color:green; } .dygraph-y2label{ color:blue; }

This setting seems to be global to a html-page and the graphs therein. If there are multiple graphs within a html-page the label colors set through CSS are the same for all.

Using some call in the java-script part of the html-page within g0.ready changes color of all label for a graph, in this call. document.getElementById("g0").style.color = "black"; The same works when implemtented in g1.ready-section using a different color. I like to set the colors for each axis label: xlabel, ylabel, y2label separate within each graph. Several variants of the above call have been tried, but didn't find a way.

This, and varinats of it, give an error, it seems that dygraph-ylabel is incorrect: document.getElementById("g0").style.color.dygraph-ylabel = "green";

Is there a way to set the label colors for individual axes separate for each grafics instance?

Solution

  • You can scope styles to an individual chart using CSS selectors. The descendant combinator, aka space, is useful here:

    /* this applies to all charts */
.dygraph-ylabel {
  color: green;
}

/* this only applies to #g0 */
#g0 .dygraph-ylabel {
  color: green;
}