chartjs / chartjs/Chart.js

Controller generateLabels - TypeError: Cannot read properties of undefined (reading 'length')

Open
#11,263 0 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

if statement to check that `data.labels` exists before checking if there is an array length

Found using https://vue-chart-3.netlify.app/ and sending `chartData` with no labels

### Current behavior

image

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')

Using [Vue Chart 3](https://vue-chart-3.netlify.app/) Doughnut Chart

## Reproduction Steps
1. Nuxt Version >= 3.0
2. chart.js `^3.9.1`
3. vue-chart-3 `^3.1.8`
4. Install [Vue Chart 3](https://vue-chart-3.netlify.app/)
5. Send Prop `chartData` without labels.

```javascript
const chartData = reactive({
datasets: [
{
data: 10,
backgroundColor: 90,
},
],
});
```
4. make `data` and `backgroundColor` reactive properties, then dynamically change them

### Reproducible sample

chart.js/dist/chart.esm.js

### Optional extra steps/info to reproduce

_No response_

### Possible solution

This fix's the issue using this patch with npx [patch-package](https://www.npmjs.com/package/patch-package)

```
diff --git a/node_modules/chart.js/dist/chart.esm.js b/node_modules/chart.js/dist/chart.esm.js
index 20729e3..0da2018 100644
--- a/node_modules/chart.js/dist/chart.esm.js
+++ b/node_modules/chart.js/dist/chart.esm.js
@@ -1987,7 +1987,7 @@ DoughnutController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
@@ -2263,7 +2263,7 @@ PolarAreaController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
diff --git a/node_modules/chart.js/dist/chart.js b/node_modules/chart.js/dist/chart.js
index 9ea0b0a..4b23e03 100644
--- a/node_modules/chart.js/dist/chart.js
+++ b/node_modules/chart.js/dist/chart.js
@@ -8431,7 +8431,7 @@ DoughnutController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
@@ -8707,7 +8707,7 @@ PolarAreaController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
diff --git a/node_modules/chart.js/dist/chart.mjs b/node_modules/chart.js/dist/chart.mjs
index 6f50690..dafb56f 100644
--- a/node_modules/chart.js/dist/chart.mjs
+++ b/node_modules/chart.js/dist/chart.mjs
@@ -1987,7 +1987,7 @@ DoughnutController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
@@ -2263,7 +2263,7 @@ PolarAreaController.overrides = {
labels: {
generateLabels(chart) {
const data = chart.data;
- if (data.labels.length && data.datasets.length) {
+ if (data?.labels?.length && data?.datasets?.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);

```

I haven't checked the other controllers, only the doughnut chart.

### Context

Im trying to animate the values via a reactive property.

### chart.js version

v3.9.1

### Browser name and version

Chrome Version 112.0.5615.137 (arm)

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.