0

I am implementing chart JS on my vue project. Please note that I have read Error: "category" is not a registered scale yet it isn't working. Versions:

 "chart.js": "^3.9.1",
 "vue-chartjs": "^4.1.1",
 "vue": "^3.2.37",

My BarChart.Vue:

<template>
  <Bar
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script>
import { Bar } from "vue-chartjs";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from "chart.js";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
);

export default {
  name: "BarChart",
  components: { Bar },
  props: {
    chartId: {
      type: String,
      default: "bar-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 400,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chartData: {
        labels: ["January", "February", "March"],
        datasets: [{ data: [40, 20, 12] }],
      },
      chartOptions: {
        responsive: true,
      },
    };
  },
};
</script>

App.vue:

<template>
  <BarChart ref="bar" />
</template>

I always get the error below on my console yet I have registered CategoryScale

chart.mjs:4009 Uncaught Error: "category" is not a registered scale. at Registry._get (chart.mjs:4009:13) at Registry.getScale (chart.mjs:3964:17) at chart.mjs:5592:37 at each (helpers.segment.mjs:60:12) at Chart.buildOrUpdateScales (chart.mjs:5579:5) at Chart._updateScales (chart.mjs:5726:10) at Chart.update (chart.mjs:5687:10) at new Chart (chart.mjs:5476:12) at renderChart (BaseCharts.ts:126:28) at chartCreate (utils.ts:27:3)

Destiny Maina
  • 61
  • 1
  • 8
  • https://codesandbox.io/s/vue-chart-3-chart-js-issue-template-forked-tzhziw?file=/src/App.vue Import and register seems to be working fine, do you have a reproducable? – LeeLenalee Aug 18 '22 at 07:51
  • When I ran it on codesandbox it worked fine. Iwonder if there is conflict with my dependencies. I use vite on vue js. – Destiny Maina Aug 18 '22 at 12:04
  • I dont know, because it is a v3 error, other thing might be that you try to create a chart before importing and registering everything – LeeLenalee Aug 18 '22 at 12:10

0 Answers0