dygraphs改变值/图例背景

Question

I'm using dygraphs on a dark background and can't seem to get the background on the legends/values to be transparent.

CSS I've tried:

.dygraph-legend {
  background:none;
}

and

.dygraph-legend {
  background-color: transparent;
}

I can't find a way to make this transparent.

Link to an image of the problem: here

Answer 1

dygraphs sets some inline styles on the legend <div >. To override them, you need to use !important :

.dygraph-legend {
  background: transparent !important;
}

Answer 2

Add another div right after the dyGraphs div and tell the graph to use this div for labels and style the labels div with the !important annotation. Eg:

CSS:

.dyStatsLegend {
color: silver !important;
background: rgba( 255, 255, 255, 0.1 ) !important;
}

HTML:

<div id="dyGraphHumTemp" class="dyStatsDiv"></div>
<div id="dyGraphHumTempLabels" class="dyStatsLegend"></div>

JavaScript:

var g1 = new Dygraph(
    document.getElementById("dyGraphHumTemp"),
    data,{
        labelsDiv: 'dyGraphHumTempLabels'
    });