Search code examples
dygraphs

Having different Dygraph legends

I have a website (single page) that has a fixed graph and an occasional pop-up graph on a hidden div.

I am using CSS

.dygraph-legend {
    background-color: rgba(200, 200, 200, 0.25) !important;
    padding: 4px;
    margin-top:30px;
    border: 1px solid #000;
    border-radius: 4px;
    pointer-events: none;
    font-size: 9px; font-weight:normal ; font-family: sans-serif;
}

Which works nicely for my main graph, but I want something different for the pop-up.

How can I specify two different legends styles?

Solution

  • You can use CSS selectors to target each chart independently.

    For instance,

    HTML:

    <div id="chart1"></div>
<div id="chart2"></div>

    CSS:

    #chart1 .dygraph-legend {
  /* styles for chart1 here */
}
#chart2 .dygraph-legend {
  /* styles for chart2 here */
}