diagram

<template>
  <div class="small">
    <line-chart :chart-data="datacollection" :options="options"></line-chart>
  </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null,
        options: {
          legend: {
            display: true,
            position: "left",
            fullWidth: true,
            labels: {
              boxWidth: 10,
              fontSize: 14
            }
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      randomColor(id) {
        let arr = [];
        for (let index = 0; index < 6; index++) {
          const r = () => Math.floor(256 * Math.random());
          arr.push(`rgba(${r()}, ${r()}, ${r()}, .3)`);
        }
        
        return arr;
        
      },
      fillData () {
        this.datacollection = {
          labels: [
            'Программист',
            'Разработчик',
            'Тестер',
            'Тимлид',
            'Фронтенд',
            'Бекенд',
        ],
          datasets: [{
            data: [1, 2, 3, 4, 5, 6],
            backgroundColor: this.randomColor()
        }],
        }
      },
    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>