Chart Vue Js Random Background Color

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>
</head>
<body>
  <div id="app">
    <h3>Chart Vue Js Random Background Color</h3>
    <canvas id="random-background-color-chart"></canvas>
  </div>
  <script>
    new Vue({
      el: '#app',
     data: {
        companies: [
          { name: 'Facebook', valuation: 1000 },
          { name: 'Apple', valuation: 2300 },
          { name: 'Microsoft', valuation: 2000 },
          { name: 'Google', valuation: 1800 }
        ]
      },
      mounted() {
        this.renderChart();
      },
      methods: {
        generateRandomColor() {
          const randomColor = Math.floor(Math.random() * 16777215).toString(16);
          return `#${randomColor}`;
        },
        generateRandomColors() {
          return this.companies.map(() => this.generateRandomColor());
        },
        renderChart() {
          const ctx = document.getElementById('random-background-color-chart').getContext('2d');
          const randomColors = this.generateRandomColors();

new Chart(ctx, {
            type: 'bar',
            data: {
              labels: this.companies.map(company => company.name),
              datasets: [{
                label: 'Company Valuation',
                data: this.companies.map(company => company.valuation),
                backgroundColor: randomColors,
              }],
            },
          });
        },
      },
    });
  </script>
  <style>
    #app {
      text-align: center;
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

canvas {
      max-width: 100%;
      height: auto;
    }
  </style>

</body>

</html>