Next
Update
Prev
Default

A scroll chart is a scrollable chart which, instead of accommodating all data in the constrained space, uses the scrollbar to scroll to a specific data point. KoolChart supports the scroll function in the column chart, bar chart, line chart, area chart and combination chart.

The <ScrollableAxisRenderer> element tag is used to create a scrollable axis, which can be defined as a child node of the <horizontalAxisRenderers> ( or <verticalAxisRenderers> ) element tag.

The <CategoryLinearAxis> element tag must be defined to use the scroll function, and <CategoryAxis> does not support the scroll function.

This sample chart is to show how to create a stacked column chart with the horizontal scrollbar.

...
<Column2DChart ... >
  ...
  <series>
    <Column2DSet type="stacked" ... />
      <Column2DSeries yField="Data1" ... />
      <Column2DSeries yField="Data2" ... />
      <Column2DSeries yField="Data3" ... />
    </Column2DSet>
  </series>
  
  <horizontalAxis>
    <CategoryLinearAxis id="hAxis" categoryField="City" />	
  </horizontalAxis>
  
  <horizontalAxisRenderers>
    <ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="7" />
  </horizontalAxisRenderers>
  ...
</Column2DChart>
...

<ScrollableAxisRenderer>

axis The axis attribute determines which axis will be drawn. The valid value is the ID of <horizontalAxis> or <verticalAxis>.
visibleItemSize The visibleItemSize attribute determines how many items will be displayed in the chart.

© 2017 KoolChart. All rights reserved.