Uncaught TypeError: Cannot read property 'hidden' of undefined.

[BUG] I’m having this error (title) if I reuse this line of code : filter(dataset => !dataset._meta[0].hidden) the complete line of code is this : this.data.datasets.filter(dataset => !dataset._meta[0].hidden).forEach(function (dataset) { //code });

A short background to make things clear:

I am working on a graph that could display the value above the bar itself and I already did that because of this forum : https://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js However we all know that in chart.js there is a legend/label above the chart that corresponds to the data being displayed. That label/legend when clicked, will hide the corresponding bar and when I do that the values that is being displayed above the graph will not hide. So upon further reading the comments on the link that I provided, I saw a line of code that I should just attach so the displayed value should hide. The thing is, the first graph is working. It’s perfect, however when I applied the same thing on my second bar chart I encountered this error (title). The same error happened on the following bar graphs. I tried to search online https://github.com/chartjs/Chart.js/issues/3546 but my scenario is different.

Expected Behavior

1. The label/legend should also hide the value that is being displayed at the top of each bar.

Current Behavior

The first bar chart doesn’t have an error and it’s perfect. The following bar graphs does encounter this error.

`success: function®{ var label1 = [], label2 = [], nondps = [] , inact = [], actv = [], id = []; $.each(r,function(a, b){ label1.push(b.s_date); label2.push(b.e_date); nondps.push(b.total_nondps); inact.push(b.total_inact); actv.push(b.total_actv); });

				var opt1 = {
					events: ['click'],
					tooltips: {
					},
					hover: {
						animationDuration: 0
					},
					layout : {
						padding: {
							left: 50
						}
					},
					scales : {
						yAxes: [{
							ticks: {
								beginAtZero:true,
								userCallback: function(value, index, values) {
										// Convert the number to a string and splite the string every 3 charaters from the end
										value = value.toString();
										value = value.split(/(?=(?:...)*$)/);
										value = value.join(',');
										return value;
									}
								}
							}],
						},
						xAxes: [{
							type: 'time',
							time: {
								displayFormats: {
									week: 'YYYY D  MMMMM'
								}
							}
						}],
						
					animation: {
						duration: 500,
						easing: "easeOutQuart",
						onComplete: function () {
							var ctx = this.chart.ctx;
							ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
							ctx.textAlign = 'center';
							ctx.textBaseline = 'bottom';
							

							this.data.datasets.forEach(function (dataset) {

								for (var i = 0; i < dataset.data.length; i++) {
									var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
									scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
									ctx.fillStyle = '#000';
									var y_pos = model.y - 5;
			                        // Make sure data value does not get overflown and hidden
			                        // when the bar's value is too close to max value of scale
			                        // Note: The y value is reverse, it counts from top down
			                        if ((scale_max - model.y) / scale_max >= 0.70)
			                        	y_pos = model.y + 20; 
			                        ctx.fillText(dataset.data[i], model.x, y_pos);
	                  			  }
	                		});               
						}
					}
				};

				 //#99a4e8
				 //#98ccf2
				 //#5b7af7

				var ctx = document.getElementById("inactive");
				var inactive = new Chart(ctx, {
					type: 'bar',
					data: {
						labels: label1,
						

						datasets: [
						{
							label: "Non Depositor #",
							backgroundColor: "#99a4e8",
							data: nondps
						},
						{
							label: "Inactive #",
							backgroundColor: "#98ccf2",
							data: inact    					
						},
						{
							label: "Active",
							backgroundColor: "#5b7af7",
							data: actv
						}   			
						]
					},
					options: opt1

				});
			}`

The graph that is working

The graph that is not working

[etimberg]

@IDN-Christian you should get the meta object with getDatasetMeta or use isDatasetVisible to check the hidden state

[simonbrunel]

@IDN-Christian you should use chart.getDatasetMeta(i) to retrieve meta data where i is the dataset index, but in case you want to know if a dataset is hidden, then directly use chart.isDatasetVisible(i):

var chart = this;
chart.data.datasets.filter(function(dataset, index) {
    return chart.isDatasetVisible(index);
}).forEach(function (dataset) {
    //code
})

About the “commas” question, check this comment, it may be useful (see this fiddle).