Search code examples
reactjsdygraphs

How to scale Dygraph on a page correctly?

I noticed that in initiating a Dygraph object width and height can only be set to pure integers. I'm not really sure what this is a measurement of. It doesn't scale when I resize my browser. I would like to set it to be something along the lines of height: 70% instead of height: 700. Is this possible?

Solution

  • I encountered these problems as well. I found that the resize example didn't help me much either.

    After a few hours of struggle, I did manage to find a solution, though. All of it is required to get the dygraph to fill the parent div, but you can (of course) change the parent width from 60%.

    HTML:

    <div id="container">
    <div id={this.props.containerId} className="dygraphChart"></div>
</div>

    CSS:

    #container {
  position: relative;
  width: 60%;
}

.dygraphChart {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  min-width: 100%;
  max-height: 100%;
}

    Hope it helps!