히스토리 차트는 디스플레이어(Displayer), 네비게이터(Navigator), 셀렉터(Selector)로 구성되어 있습니다. 레이아웃은 아래와 같이 작성합니다.
<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">
<Options>
<Caption text="History Chart"/>
</Options>
<HistoryChart>
<displayerChart>
<Displayer id="chart1" showDataTips="true" width="100%" height="100%">
<horizontalAxis>
<CategoryAxis id="mainHAxis" categoryField="Date"/>
</horizontalAxis>
<series>
<Column2DSeries labelPosition="inside" id="columnSeries" maxColumnWidth="20"
yField="Data1" fill="0xB0C759" fontFamily="Myriad" showLabelVertically="true"
displayName="Data1">
<showDataEffect>
<SeriesInterpolate duration="1000"/>
</showDataEffect>
</Column2DSeries>
</series>
</Displayer>
</displayerChart>
<navigator>
<Navigator id="navi" width="100%" height="80" gutterLeft="0" gutterRight="0" paddingLeft="30" paddingRight="10">
<horizontalAxis>
<CategoryAxis categoryField="Date" id="naviHAxis" padding="0"/>
</horizontalAxis>
<horizontalAxisRenderers>
<Axis2DRenderer axis="{naviHAxis}" visible="false"/>
</horizontalAxisRenderers>
<verticalAxis>
<LinearAxis id="vAxis"/>
</verticalAxis>
<verticalAxisRenderers>
<Axis2DRenderer axis="{vAxis}" visible="false"/>
</verticalAxisRenderers>
<backgroundElements>
<GridLines direction="horizontal"/>
</backgroundElements>
<series>
<Area2DSeries name="A" yField="Data1"/>
</series>
</Navigator>
</navigator>
<selector>
<HistoryRangeSelector width="100%" startingRange="center" visibleItemSize="30"/>
</selector>
</HistoryChart>
</rMateChart>
