This commit is contained in:
2019-08-10 16:08:44 +02:00
parent f18ef58789
commit c2f68a57b6
2 changed files with 11 additions and 12 deletions

View File

@@ -53,7 +53,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
#app { #app {
height: 100%; height: 100vh;
} }
#app, #app,
.section { .section {

View File

@@ -1,10 +1,7 @@
<template> <template>
<div class="chart-container"> <div class="chart-container">
<Loader v-if="loading"></Loader> <Loader v-if="loading"></Loader>
<div class="chart" v-else> <div class="chart" ref="chart" v-else></div>
<!-- Wrapper for chart so that highchart doesn't create scrollbars -->
<div ref="chart"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
@@ -54,7 +51,7 @@ export default {
const type = this.type const type = this.type
const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value })) const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
Highcharts.chart(this.$refs.chart, { Highcharts.chart(this.$refs.chart, {
chart: { styledMode: true }, chart: { styledMode: true, marginBottom: 25 },
title: { text: '' }, title: { text: '' },
legend: { enabled: false }, legend: { enabled: false },
plotOptions: { plotOptions: {
@@ -107,12 +104,6 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/style/_variables.scss"; @import "@/style/_variables.scss";
.chart, .chart div {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
}
.chart-container { .chart-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -120,6 +111,14 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 24px; margin-bottom: 24px;
position: relative;
}
.chart {
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
} }
.highcharts-graph { .highcharts-graph {
stroke-width: 3px; stroke-width: 3px;