A history chart is composed of three parts: <displayerChart>, <navigator>, <selector>.

  • <displayerChart> : The main chart will be defined.
  • <navigator> : The chart to be used for the navigation purpose will be defined.
  • <selector> : The selector to be displayed on the navigation chart will be defined.

This sample chart is to show how to create a history chart with a line chart.

    <Line2DSeries yField="Data1" ... >
    <Navigator height="80" ... >
      <Area2DSeries yField="Data1" ... />

    <HistoryRangeSelector startingRange="center" visibleItemSize="30" unSelectedRangeAreaStyleName="unSelectedRangeAreaStyle"/>


height The height attribute sets the height of the navigation chart.


startingRange The startingRange attribute controls the initial location of the selector. The valid values are "center", "left", "right", and the default value is "center"
visibleItemSize The visibleItemSize attribute controls the number of data to be displayed in the main chart at the initial rendering of the chart. It is the percentage of the total number of data. e.g if the total number of data is 100 and visibleItemSize="10", then 10 items, which is 10% of the total number of data will be displayed at the initial rendring of the chart.

© 2017 KoolChart. All rights reserved.