Charts Showing On The Same Line In Non-IE Browsers, But On The Next Line On IE Browsers

Here is the exact code you can try for yourself: http://bl.ocks.org/AndrewStaroscik/5232739 When I render this in IE, each chart shows in a different line. When I render it in any

Solution 1:

Your charts render on two lines in all the browsers I tried (latest Chrome 26, latest Firefox 19, and IE 9).

They are contained in an <iframe> whose width is 960px. The width of each <svg> chart is 500px, so of course they can't display side-by-side without some kind of positioning of floating. Resize the charts or use CSS to cause them to overlap (or, if that's not the goal, then use CSS to force them to stack).

Solution 2:

for me all are loading in the inline fashion the reason ? Because SVG has inline property associated by the USER AGENT of the browser . I am not sure which IE browser you used , but I am using IE 10.0 , chrome and firefox also the latest . EVERYTHING displays it INLINE .

ps: SVG doesn't work properly for IE less than 8

FIX : try reducing height and width of the svg using CSS . It might be pushed to next line for some reason.