FusionCharts Suite XT allows you to customize several functional and cosmetic properties for scroll charts.
In this section, you will be shown how you can:
Configuring the number of visible data plots
Render a scroll bar with the gradient effect
Customize the scroll bar
Configuring the Number of Visible Data Plots
A scroll chart with the number of visible data plots set to six looks like this:
Given below is a brief description of the attribute used to set the number of visible plots:
| Attribute Name | Description |
|---|---|
numVisiblePlot |
It is used to specify the number of data plots that will be visible in the scroll pane when the chart is first loaded. |
The data structure needed to set the number of visible data plots is given below:
Rendering a Scroll Bar with the Gradient Effect
By default, a scroll chart has a flat scroll bar. You can opt to render a gradient scroll to visually enhance your chart.
A scroll chart with a gradient scroll bar looks like this:
Given below is a brief description of the attribute used to select a flat / gradient scroll bar:
| Attribute Name | Description |
|---|---|
flatscroll bars |
It is used to specify whether a gradient scroll bar or a flat scroll bar will be rendered on the chart. Setting this attribute to 0 will render a gradient scroll bar, setting it to 1 (default) will render a flat scroll bar. |
The data structure needed to render a gradient scroll bar is given below:
Customizing the Scroll Bar
A scroll chart with the cosmetic properties of the scroll bar customized looks like this:
Given below is a brief description of the attributes used to customize the scroll bar :
| Attribute Name | Description |
|---|---|
scrollColor |
It is used to specify the hex code of the color that will be used to render the scroll bar. |
scrollHeight |
It is used to specify the height of the scroll bar. |
scrollPadding |
It is used to specify the distance, in pixels, of the scroll bar from the canvas. |
The data structure needed to customize the scroll bar is given below:
There! You have now seen how you can customize your scroll charts.