WeekChart.vue

<template>
  <div class="barchart-container">
    <apexchart width="300" type="bar" :series="series" :options="chartOptions"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        chart: {
          id: 'week-averages-chart',
          toolbar: false,
          fontFamily: 'Bungee',
          foreColor: 'white',
          dropShadow: {
            enabled: true,
          }
        },
        plotOptions: {
          bar: {
            borderRadius: 5
          }
        },
        colors: ['#004377'],
        xaxis: {
          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisBorder: {
            height: 3
          },
          axisTicks: {
            show: false
          }
        },
        yaxis: {
          labels: {
            formatter(value) {
              return value + ' ml'
            }
          }
        },
        grid: {
          show: true,
        },
        dataLabels: {
          enabled: false,
          style: {
            colors: ['white'],
            fontFamily: 'Bungee',
            fontSize: 15
          },
          dropShadow: {
            enabled: true,
          },
          formatter(value) {
            return value === 0 ? '' : value
          }
        },
        noData: 'Loading...'
      },
      weekData: {},
      weekConsumption: [],
      bestDay: 'monday',
    }
  },
  async fetch() {
    const weekDataResponse = await this.$axios.get('/api/consumption/average-graph' +
      '?precision=week')
    this.weekData = weekDataResponse.data
    this.weekConsumption = this.weekData.moments.map(moment => moment.average)
    this.weekConsumption.push(this.weekConsumption.shift())
    const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
    let max = 0
    for (let i = 0; i < 7; i++) {
      if ((this.weekConsumption[i]) > max) {
        max = this.weekConsumption[i]
        this.bestDay = days[i]
      }
    }
    this.$store.commit('setBestWeekDay', this.bestDay)
  },
  computed: {
    series() {
      if (!Object.prototype.hasOwnProperty.call(this.weekData, 'moments')) {
        return undefined
      }
      return [{
        name: 'average',
        data: this.weekConsumption
      }]
    }
  }
}
</script>

<style lang="scss">
#apexchartsweekxaveragesxchart {

  padding-top:1em;
  .apexcharts-xaxis-label,
  .apexcharts-yaxis-label {
    text-shadow: #555 1px 1px 5px;
  }

  .apexcharts-tooltip {
    color: #333;
  }

  .apexcharts-tooltip-text-y-value,
  .apexcharts-tooltip-text-goals-value,
  .apexcharts-tooltip-text-z-value {
    font-weight: unset;
  }
}
</style>