TechNote (Archived)

Charts appear black when used with TileLists

Issue

---

A Macromedia Flex chart (PieChart, BarChart, etc.) may be used as a cell renderer of a TileList. A problem occurs when the TileList's itemWidth and/or itemHeight properties are changed dynamically. The charts will appear either entirely black (as is the case with PieCharts) or partially black.

Reason

---

When the TileList resizes its children, it engages their clipping masks. This is not usually an issue for other components, such as the DataGrid, but for charts, it results in the blackening of some or all of its areas.

Solution

---

The solution is to turn off the chart's clipping mask through the clipContent property.

Here is a partial main application (Main.mxml) showing how the TileList is declared:

 <mx:TileList id="mycharts" itemWidth="100"   itemHeight="100" cellrenderer="MyChartTile" /> 

Here is a partial definition of the MyChartTile.mxml file showing a ColumnChart declaration:

 <mx:ColumnChart dataProvider="{sampleData}"  ><mx:series><mx:Array><mx:ColumnSeries yField="expense" /><mx:ColumnSeries yField="revenue" /></mx:Array></mx:series></mx:ColumnChart> 

When the TileList's itemWidth anditemHeight properties are changed, the ColumnChart will appear with a black background.

To solve this, simply add clipContent="false" to the ColumnChart declaration:

 <mx:ColumnChart dataProvider="{sampleData}"     clipContent="false"> 

Search Support

---