Fusion ChartsWe have been using Fusion Charts for a number of projects. They provide very nice slick looking animated graphs and widgets (now available as Google Gadgets too incidentally). However as they are Flash based they can cause problems when you place other elements in front of them – for example a “modal dialog” box.

Flash objects are rendered differently to normal HTML elements and are placed “in-front” of all other elements by default, even if you set the z-index to huge values. Thankfully, there is a fix for this:

In IE:
Place the following inside the <object> tag of your chart:

<param name=”WMode” value=”Transparent”></param>

In Firefox/Mozilla:
Place the following inside the <embed> tag of your chart:

<embed wmode=”transparent” …. ></embed>

Using the Javascript API:
Place the following after you have created your chart object:

var BarGraph = new FusionCharts("StackedColumn2D.swf",
				"ChartId", "176", "140", "0", "0");
BarGraph.addParam("WMode", "Transparent");

...