diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 7cedaa9..0c83d8a 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -122,3 +122,8 @@ div.right-aligned {
 .x-treelist-pve-nav {
     background-color: #f5f5f5;
 }
+
+/* fix padding for legend in header */
+.x-legend-inner {
+    padding: 0;
+}
diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 49b3ad2..859cb39 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -121,6 +121,9 @@ Ext.define('Proxmox.widget.RRDChart', {
 	},
 
 	onAfterAnimation: function(chart, eopts) {
+	    if (!chart.header || !chart.header.tools) {
+		return;
+	    }
 	    // if the undo button is disabled, disable our tool
 	    let ourUndoZoomButton = chart.header.tools[0];
 	    let undoButton = chart.interactions[0].getUndoButton();
@@ -137,10 +140,16 @@ Ext.define('Proxmox.widget.RRDChart', {
 	},
     ],
     legend: {
+	type: 'dom',
 	padding: 0,
     },
     listeners: {
-	animationend: 'onAfterAnimation',
+	redraw: {
+	    fn: 'onAfterAnimation',
+	    options: {
+		buffer: 500,
+	    },
+	},
     },
 
     constructor: function(config) {
@@ -200,6 +209,7 @@ Ext.define('Proxmox.widget.RRDChart', {
 	if (me.header && me.legend) {
 	    me.header.padding = '4 9 4';
 	    me.header.add(me.legend);
+	    me.legend = undefined;
 	}
 
 	if (!me.noTool) {