Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Bar chart container changing height on roll over

Hi,

Bar chart container changing height on roll over. The behaviour is only observed in IE9. Is there any clue?

Can you share a reproducible example to help us help you?

For example:

var trace1 = {
x: [150, 280, 340, 350, 420],
y: [“John Doe”, “Rohan”, “Hello World”, “Anand Demo”, “Ritesh Danny”],
name: ‘Complete’,
orientation: ‘h’,
marker: {
color: ‘orange’,
width: 1
},
type: ‘bar’
};

var trace2 = {
x: [200, 180, 180, 300, 300],
y: [“John Doe”, “Rohan”, “Hello World”, “Anand Demo”, “Ritesh Danny”],
name: ‘In Progress’,
orientation: ‘h’,
type: ‘bar’,
marker: {
color: ‘blue’,
width: 1
}
};

var trace3 = {
x: [100, 200, 250, 200, 230],
y: [“John Doe”, “Rohan”, “Hello World”, “Anand Demo”, “Ritesh Danny”],
name: ‘Not Started’,
orientation: ‘h’,
type: ‘bar’,
marker: {
color: ‘red’,
width: 1
}
};

var data = [trace2, trace3, trace1];

var __width = 550;
var __height = 200;

var layout = {
bargap: .7,
width: __width,
height: __height,
title: ‘5 of 32 Direct Reports of John Doe’,
barmode: ‘stack’,
legend: {
“orientation”: “h”,
x:-.3,
y:-.3
},
margin: {
l: 110,
r: 50,
t: 50,
b: 30,
pad: 8
},
paper_bgcolor: “transparent”,
showlegend: 1
};

Plotly.newPlot(‘myDiv’, data, layout);