search

bbonnin / vue-morris

VueJS component wrapping Morris.js
MIT License
237 stars 36 forks source link

Multiple chart placements #42

Closed Germs31 closed 3 years ago

Germs31 commented 3 years ago

Hi! Im not sure if i just cant find the solution or its really an issue but when i am dynamically creating the chart in a v-for all of the charts created tend to float at the top. I thought it was a css position of sorts but cant seem to find what is causing this issue Screen Shot 2021-06-23 at 11 43 16 AM

ideal each chart should be with in the yellow div. Screen Shot 2021-06-23 at 11 43 35 AM


        <div class="analytic__block__content">
            <img :src="a.img" alt="">
            <div class="analytic__block__content__text">
                <h4>{{a.title}}</h4>
                <p>{{a.descriptions}}</p>
            </div>
        </div>
        <div class="analytic__block__chart">
            <line-chart
                class="block__chart"
                id="line"
                :data="a.chart"
                xkey="year"
                ykeys='["a","b"]'
                line-colors='[ "#3DB370" ]'
                grid="true"
                grid-text-weigth="bold"
                resize="false"></line-chart>
        </div>
    </div>```` 

this is what i have going on.
Germs31 commented 3 years ago

NVM I solved it. It was the id. each block needed to have its own unique id so i did string interpolation on the Id prop. so it looked something like this

:id=" line-chart-${i} "

this is for anyone else that got stuck like me :D