QingWei-Li/vue-trend

[How] Width 100%

JollyBrackets opened this issue · 1 comments

Is there a way to force the trendline to be 100% width?
I would like it to fill out the width of the parent div and then to control the height (also in % of parent)

image

Ok after some testing I finally figured it out:

If you want to overlay two trendlines, you need two put them into divs:

<div id="wrapper">
        <div class="trend">
          <trend :data="data1" :gradient="['#2E5EAA', '#2E5EAA']" :max="1" :min="0" />
        </div>
        <div class="trend">
          <trend :data="data2" :gradient="['#e2a0c1', '#B81365']" :max="1" :min="0" />
        </div>
      </div>
#wrapper {
  position: relative;
  width: 100%
}
.trend {
  width: 100%;
  position: absolute;
  top: 0;
}

There are two important things:

  • The <trend /> needs to be in a separate div
  • Both #wrapper and .trend need to be set to width: 100%

This what I discovered, not best practice or anything.
Hope this helps someone else with the same problem.