We saw this interesting bug with AngularJS and inline style with IE browsers. And we finally managed to find a workaround for this problem. And the solution requires ng-style and a separate function. :D
There might be cases where you wanted to show or replace the vertical and horizontal origin's of the chart with a different type of line. Here's a simple example to demo the hiding and showing of the origin of the chart..
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="completeHandler(event)">
<mx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.formatters.DateFormatter;
//Records used in the chart
[Bindable]
private var myData:XML =
<records>
<record>
<x>-7.81</x>
<y>-4.98</y>
</record>
<record>
<x>-2.84</x>
<y>-4.62</y>
</record>
<record>
<x>-8.66</x>
<y>2.52</y>
</record>
<record>
<x>3.56</x>
<y>6.86</y>
</record>
<record>
<x>-9.54</x>
<y>-8.05</y>
</record>
<record>
<x>7.48</x>
<y>0.37</y>
</record>
<record>
<x>9.2</x>
<y>9.5</y>
</record>
<record>
<x>9.32</x>
<y>-1.59</y>
</record>
<record>
<x>1.77</x>
<y>-0.86</y>
</record>
<record>
<x>-8.61</x>
<y>-1.75</y>
</record>
</records>;
private var dateCollection:ArrayCollection;
protected function completeHandler(event:FlexEvent):void
{
// Parsing the xml data into ArrayCollection
var objArray:ArrayCollection = new ArrayCollection();
var tempObj:Object;
for(var i:int = 0; i < myData.record.length(); i ++)
{
tempObj = new Object();
tempObj.x = myData.record[i].x;
tempObj.y = myData.record[i].y;
objArray.addItem(tempObj);
}
// Create the new series and set its properties.
var localSeries:LineSeries = new LineSeries();
localSeries.dataProvider = objArray;
localSeries.yField = "y";
localSeries.xField = "x";
// Back up the current series on the chart.
var currentSeries:Array = mainChart.series;
// Add the new series to the current Array of series.
currentSeries.push(localSeries);
// Add the new Array of series to the chart.
mainChart.series = currentSeries;
}
//We are customizing the datatip / tool tip of the
//chart data.
public function myDataTipFunction(e:HitData):String {
var s:String = "";
s += "x: " + e.item.x + "<br>";
s += "y: " + e.item.y;
return s;
}
]]>
</mx:Script>
<mx:VBox verticalGap="5" width="100%" height="100%"
verticalAlign="middle">
<mx:HBox width="100%" horizontalAlign="center">
<mx:LineChart id="mainChart"
showDataTips="true"
width="95%"
dataTipFunction="myDataTipFunction">
<mx:Stroke weight="2"
alpha="1"
color="#00FF00"
id="horiOriginStroke"/>
<mx:Stroke weight="2"
alpha="1"
color="#FF0000"
id="vertOriginStroke"/>
<mx:backgroundElements>
<mx:GridLines direction="both"
horizontalShowOrigin="{chkHori.selected}"
horizontalOriginStroke="{horiOriginStroke}"
verticalShowOrigin="{chkVert.selected}"
verticalOriginStroke="{vertOriginStroke}"/>
</mx:backgroundElements>
</mx:LineChart>
</mx:HBox>
<mx:HBox width="100%"
horizontalAlign="center">
<mx:CheckBox id="chkHori"
selected="true"
label="Show Horizontal Origin"/>
<mx:CheckBox id="chkVert"
selected="true"
label="Show Vertical Origin"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
* Click here for the demo shown in this post.
