Div Lines and Grids

Divisional lines are horizontal lines running along the canvas. They enable easier visual reference of plot values against the y-axis and for comparison across data points. In scatter and bubble charts, there are additional vertical divisional lines for better visualization.

By default, FusionCharts Suite XT automatically adds div lines based on the minimum and maximum y-axis values. However, several customization options for div lines are available too.

This article talks about:

  • Customizing number of divisional lines

  • Customizing display of divisional lines

  • Customizing horizontal grid bands

Customizing number of divisional lines

In certain cases, you might want to explicitly specify the y-axis minimum & maximum values as well as the number of divisional lines. To do this, you need to disable the automatic adjustment of divisional lines and explicitly define the y-axis upper and lower limits as well as the number of divisional lines to render. A column 2D chart with explicitly specified number of divisional lines is shown below:

FusionCharts should load here..

Given below are the attributes used to adjust divisional lines:

Attribute Description
adjustDiv If set to 0, it disables the automatic adjustment of divisional lines and allows you to explicitly specify the number of div lines to render as well as the y-axis lower and upper limits.
yAxisMinValue and yAxisMaxvalue They specify the lower and upper limits, respectively, for the y-axis.
numDivLines It specifies the number of divisional lines to render.

The data structure used, in the chart above, to explicitly specify number of divisional lines in a chart is given below:

...

Customizing display of divisional lines

A multi-series column 2D chart with customized div lines(explicitly defined) looks as below:

FusionCharts should load here..

Given below are the attributes used to customize the appearance of the divisional lines:

Attribute Description
divLineColor If specifies the hex code for the color that will be used to render the horizontal divisional lines. e.g. #00ffaa.
divLineThickness Sets the thickness of the horizontal divisional lines(in pixels).
divLineAlpha Sets the transparency of the divisional lines. Can take values from 0 (transparent) to 100 (opaque).

The data structure used, in the chart above, to customize div lines is given below:

...

Using dashed divisional lines

FusionCharts Suite XT allows you to render the divisional lines as dashed lines, instead of the default continuous lines.

A line chart with dashed div lines looks as below:

FusionCharts should load here..

Given below are the attributes used to render divisional lines as dashed:

Attribute Description
divLineDashed Set this to 1 to make divisional lines dashed or 0 (default) to make them normal.
divLineDashLen Sets the length of each dash of divisional lines(in pixels).
divLineDashGap Sets the gap between two consecutive dashes in divisional lines (in pixels).

The data structure used, in the chart above, to add dashed div lines is given below:

...

Customizing horizontal grid bands

To further aid data visualization, alternate spaces between grid lines can be colored to create grid bands.

Showing/hiding horizontal grid bands

Horizontal grid bands, by default, do not appear between the divisional lines. A column 2D chart with horizontal grid bands enabled is shown here:

FusionCharts should load here..

Given below is the attribute used to show/hide the horizontal grid bands:

Attribute Description
showAlternateHGridColor Set this to 1 to show horizontal grid bands or 0 to hide them.

The data structure used, in the chart above, to show/hide horizontal grid bands is given below:

...

Customizing horizontal grid bands

A column 2D chart with customized horizontal grid bands looks as below:

FusionCharts should load here..

Given below are the attributes used to customize the horizontal grid bands:

Attribute Description
alternateHGridColor It specifies the hex code for the color that will be used to render the horizontal grid bands. e.g. #00ffaa.
alternateHGridAlpha It specifies the transparency of the horizontal grid bands. Can take values from 0 (transparent) to 100 (opaque).

The data structure used, in the chart above, to customize horizontal grid bands is given below:

...