<template>
  <div class="container">
    <pie :chartdata="data" :options="options"></pie>
  </div>
</template>

<script>
import pie from './charjs_donut'

export default {
  name: 'postesComparison',
  components: {
    'pie': pie
  },
  data () {
    return {
      data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
          {
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: 'Predicted world population (millions) in 2050'
        }
      }
    }
  },
  computed: {
  },
  methods: {
  }
}

</script>

<style scope>
.container {
  position: relative;
  height: 40vh;
  width: 80vw;
}
</style>
