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

0👍

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.

1👍

there were two issues in my code :

  • not importing Colors
  • plugin > enabled : false

Leave a comment