mpx200 / ng-dygraphs

Angular 2+ library for support of dygraphs(http://dygraphs.com) charts
MIT License
3 stars 9 forks source link

Change background color and reproduce dark mode example #34

Open caiofcm opened 4 years ago

caiofcm commented 4 years ago

How can I reproduce the dygraphs dark mode example:

http://dygraphs.com/gallery/#g/range-selector

image

Any guidance on how to properly adjust the class of the div container?

<div style="background-color: #101015; color: white">
    <p>Dark background, custom range selector gradient color.</p>
    <div id="darkbg" style="width:600px; height:300px;"></div>
</div>

Thank you.

kzlucas commented 3 years ago

Hello,

See the CSS reference in the doc : https://dygraphs.com/css.html

You can use DyGraph JS options for styling curves, points and so on :

        var g = new Dygraph(
            document.getElementById("graphDiv"),
            data, {
                series: {
                    Temperature: {
                        color: "yellow",
                    }
                }
           }

You can use CSS class for styling title, labels, legend and background color like so :


/* Chart background */ 
#graphDiv{
  background:#000;
}

/* Legend */
.dygraph-legend > span {
  color: #fff ;
}

/* Title: */ 
.dygraph-label, .dygraph-title{
  color:#fff;
}
/* x-axis label: */ 
.dygraph-label, .dygraph-xlabel{
  color:#fff;
}
/* y-axis label: */ 
.dygraph-label, .dygraph-ylabel{
  color:#fff;
}
/* y2-axis label: */ 
.dygraph-label, .dygraph-y2label{
  color:#fff;
}
/* x-axis label: */ 
.dygraph-axis-label, .dygraph-axis-label-x{
  color:#fff;
}
/* y-axis label: */ 
.dygraph-axis-label, .dygraph-axis-label-y{
  color:#fff;
}
/* y2-axis label */
.dygraph-axis-label, .dygraph-axis-label-y, .dygraph-axis-label-y2{
  color:#fff;
}