0

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

uminder
  • 23,831
  • 5
  • 37
  • 72
KarljoY973
  • 13
  • 4
  • This answer may help you finding a solution for your case: https://stackoverflow.com/a/59692184/2358409 – uminder May 29 '23 at 06:36
  • By looking at the warning you get, I gather that `ValuesLabel` is transformed to `valuesLabel`. I haven't used vue, but I see there's a lot of discussion on [camel case vs kebab case](https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case). Indeed, html attributes are case-insensitive. I understand that some frameworks can deal with camel case, but `ValueLabel` is neither camel nor kebab. So, the first step: replace `ValuesLabel` with `valuesLabel` (or, why not, even `valueLabels`) – kikon May 29 '23 at 09:56
  • thanks, I tried but it doesn't work – KarljoY973 May 29 '23 at 14:26
  • As uminder reported, you could add backgroundColor option to the dataset, with an array of colors. I think you are using CHART.js 3 because starting from 4 there is a color plugin which is filling/bordering the elements with a fixed palette. – user2057925 May 30 '23 at 10:48
  • I am using chart js 4 and according to the documentation it is supposed to be automatically set up. I wanted to add that when I am not using props, everything is working fine – KarljoY973 May 30 '23 at 15:51

2 Answers2

1

there were two issues in my code :

  • not importing Colors
  • plugin > enabled : false
user2057925
  • 2,377
  • 1
  • 12
  • 12
KarljoY973
  • 13
  • 4
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.

KarljoY973
  • 13
  • 4