var ctx = document.getElementById("histogram");

const footer = (tooltipItems) => {
  let sum = 0;

  tooltipItems.forEach(function(tooltipItem) {
    sum += tooltipItem.parsed.y;
  });
  return 'Sum: ' + sum;
};

var myChart = new Chart(ctx, {
	type: "bar",
	options: {
		aspectRatio: 4,
	},
	data: {
		labels: labels,
		datasets: datasets
	},
	options: {
	interaction: {
      intersect: false,
      mode: 'index',
    },
       plugins: {
      tooltip: {
        filter: function (tooltipItem, data) {
          // Your filtering logic here
          console.log(tooltipItem, data);
          return tooltipItem.raw != 0; // Show tooltip only for the first dataset
        },
        callbacks: {
          footer: footer,
        },
      },
    },
		responsive: true,
		maintainAspectRatio: false,

		scales: {
		    x: {
		            stacked: true,
		            },
			y: {
				stacked: true,
				beginAtZero: true,
				title: {
					display: true,
					text: 'SSH login attempts'
				},
			},
		},
		layout: {
			padding: {
				left: 20,
				right: 20,
				top: 20,
				bottom: 20
			},
		}
	},
});