The chart list is not showing

user_13041590 0
Viewed 120

This is my chart code

        datasets: [
      {
        label: "Fraction KG",
        data: data,
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(200, 121, 121, 0.2)",
        ],
      },
    ],
    labels: label

And this is how my chart looks: enter image description here

Why is not the list beside the chart not showing is there some option value yu have to set?

enter image description here

this is the pie component

PieChart.js

import { Pie, mixins } from 'vue-chartjs';
import globalOptionsMixin from "./globalOptionsMixin";
 export default {
  name: 'pie-chart',
  extends: Pie,
  mixins: [mixins.reactiveProp, globalOptionsMixin],
  props: {
    extraOptions: {
      type: Object,
      default: () => ({})
    }
   },
  data() {
     return {
       ctx: null
     };
   },
   mounted() {
    this.$watch(
      'chartData',
      (newVal, oldVal) => {
        if (!oldVal) {
          debugger;
          this.renderChart(this.chartData, this.extraOptions);
        }
      },
      { immediate: true }
    );
  }
};
vue-chartjs chart.js vue.js
2 Answers

The ChartJs labels are determined by the labels property. In your example, this is set to an unknown variable called label. This should be an array of strings.

For example:

labels: ['Italy', 'India', 'Japan', 'USA']

You could set this array to your label variable, wherever it is defined:

const label = ['Italy', 'India', 'Japan', 'USA'];

{
  ...
  labels: label
}
user_21850930

Template contain chart tag

  <chartjs-pie :labels="labels" :data="dataset" :bind="true"></chartjs-pie>

Then pass data through script

data: function data() {
          return {
            labels: ['Italy', 'India', 'Japan', 'USA'],
            dataset: [..]
          };
        },
user_27462700
Related