How to fix Chart.js doughnut chart with missing background colors and missing labels when working with props?

Question

I am using Chart.js in order to display a doughnut chart. I want to use props so that I could do some API calls and have different doughnut charts with various data showing up. My issue is that my code is not fully working. I have all the different sections showing up but with no background color. Can someone help me fix this ?

<!-- DoughnutChart -->
<template>
    <div>
      <canvas id="myChart" width="80%" height="80%"></canvas>
      <p>Here is my chart <h1>{{ topLabel }}</h1></p>
    </div>
  </template>
  
  <script>
  import { Chart, ArcElement, DoughnutController } from 'chart.js';
  Chart.register(DoughnutController, ArcElement);
  
  export default {
    name: "doughnut-chart",
    props: {
      ValuesLabel: {
        type: Array,
        required: true,
        default: ["value1", "value2", "value3", "value4", "value5"]
      },
      topLabel: {
        type: String,
        required: true,
        default: "Here is my chart"
      },
      dataChart: {
        type: Array,
        required: true,
        default: [10, 20, 30, 40, 50]
      }
    },
    mounted() {
      console.log("My doughnut chart is mounted");
      console.log()
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: this.ValuesLabel,
          datasets: [
            {
              label: this.topLabel,
              data: this.dataChart,
            }
          ]
        }
      });
      return myChart;
    }
  };
  </script>
  

here is my budget view component

<-- myBudgetView -->
<template>
    <div>
      <h1>My Budget</h1>
      <doughnut-chart
        :ValuesLabel="labels"
        :topLabel="topLabel"
        :dataChart="dataChart"
      />
    </div>
  </template>
  
  <script>
  import DoughnutChart from "../components/Charts/DoughnutChart.vue";
  
  export default {
    components: {
      DoughnutChart
    },
    name: "myBudgetView",
  
    // Data section
    data() {
      return {
        labels: ['fruits', 'veggies', 'meat', 'dairy', 'snacks'],
        topLabel: "My expenses",
        dataChart: [12, 20, 33, 40, 51]
      };
    }
  };
  </script>
  

here is what I get enter image description here

I expect the same thing with some color in each section like so : enter image description here

Answer 1

I will show in a better way how I did solve the issue.

I defined an object called option like so :

     const options = {
  plugins: {
    colors: {
      enabled: true
    }
  }
};

 const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: this.ValuesLabel,
      datasets: [
        {
          label: this.topLabel,
          data: this.dataChart,
        }
      ]
    },
    options : options
  });
  return myChart;

with this method you can forget about importing 'Colors' because it doesn't exist anymore as a lib. It is now a plug-in.

However, if you need to createt multiple charts in the same vue-app, it seems to be impossible and you have to use a lib that uses svg tags instead of canvas. I tried to use svg tags with chart.js but it is impossible.

Answer 2

there were two issues in my code :

• not importing Colors
• plugin > enabled : false