[How] Width 100%
JollyBrackets opened this issue · 1 comments
JollyBrackets commented
JollyBrackets commented
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.