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 <verticalAxisRenderers> ( or <horizontalAxisRenderers> ) 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 inverted multiseries bar chart with the vertical scrollbar.

...
<Bar2DChart ... >
  ...
  <series>
    <Bar2DSeries xField="Data1" ... />
    <Bar2DSeries xField="Data2" ... />
    <Bar2DSeries xField="Data3" ... />
  </series>
  
  <verticalAxis>
    <CategoryLinearAxis id="vAxis" categoryField="City" direction="inverted"/>	
  </verticalAxis>
  
  <verticalAxisRenderers>
    <ScrollableAxisRenderer axis="{vAxis}" visibleItemSize="5" scrollBarPlacement="right"/>
  </verticalAxisRenderers>
  ...
</Bar2DChart>
...

<CategoryLinearAxis>

categoryField The categoryField attribute determines which field in the Data Object will be used as the value of the category axis.
direction The direction attribute determines the direction of the axis. The valid values are "normal", "inverted", and the default value is "normal".

<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.
scrollBarPlacement The scrollBarPlacement attribute determines where the scrollbar will be drawn. If the value is "right", then the scrollbar will be drawn at the right side of the chart. The valid values are "left", "right", and the default value is "left". (For the column chart, The valid values are "bottom", "top", and the default value is "bottom".)

© 2017 KoolChart. All rights reserved.