CODEWITHSUNDEEP
reactjsdygraphs
foerever
foerever

Reputation: 335

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?

Upvotes: 3

Views: 3522

Answers (1)

kathpanderson
kathpanderson

Reputation: 76

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!

Upvotes: 3

Related Questions