Verified Commit 08e25e13 authored by Luc Didry's avatar Luc Didry
Browse files

Fix chart responsiveness

parent eb6f2d10
......@@ -15,7 +15,9 @@
<div v-else class="columns has-text-centered">
<div v-for="pie in pies" :key="pie.label" class="column is-one-third">
<h2 class="is-size-3">{{ pie.label }}</h2>
<vue-chart type="pie" :data="pie" :config="pieConfig"></vue-chart>
<div class="pie-container">
<vue-chart type="pie" :data="pie" :config="pieConfig"></vue-chart>
</div>
</div>
</div>
</div>
......@@ -93,3 +95,35 @@ export default {
}
}
</script>
<style lang="sass">
@mixin pc($height)
position: relative
height: 100%
width: 100%
min-height: $height
@media screen and (max-width: 394px)
.pie-container
@include pc(140px)
@media screen and (min-width: 395px)
.pie-container
@include pc(165px)
@media screen and (min-width: 446px)
.pie-container
@include pc(200px)
@media screen and (min-width: 491px)
.pie-container
@include pc(250px)
@media screen and (min-width: 591px)
.pie-container
@include pc(300px)
@media screen and (min-width: 701px)
.pie-container
@include pc(350px)
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment