2 thoughts on “Uncaught TypeError: Cannot read property ‘hidden’ of undefined(…)

  1. @milostimotic I think I see the issue.

    In your first image, you have multiple datasets but each data in the dataset is not an array. It’s just an object. In your fiddle, you have 1 object inside an array and then it works.

Comments are closed.

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(r){
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

sampleworkinggraph
sampleworkinggraph002
sampleworkinggraph003

The graph that is not working

samplegraph

Author: Fantashit

1 thought on “Uncaught TypeError: Cannot read property ‘hidden’ of undefined.

Comments are closed.