Loading
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:
Given below are the attributes used to adjust divisional lines:
Attribute |
Description |
|
If set to |
|
They specify the lower and upper limits, respectively, for the y-axis. |
|
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:
{
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
"showValues": "0",
"adjustDiv": "0",
"yAxisMaxvalue": "35000",
"yAxisMinValue": "5000",
"numDivLines": "9"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Last Week",
"data": [
{
"value": "13000"
},
{
"value": "14500"
},
{
"value": "13500"
},
{
"value": "15000"
},
{
"value": "15500"
},
{
"value": "17650"
},
{
"value": "19500"
}
]
},
{
"seriesname": "This Week",
"data": [
{
"value": "15400"
},
{
"value": "16800"
},
{
"value": "18800"
},
{
"value": "22400"
},
{
"value": "23800"
},
{
"value": "25800"
},
{
"value": "30800"
}
]
}
]
}Customizing display of divisional lines
A multi-series column 2D chart with customized div lines(explicitly defined) looks as below:
Given below are the attributes used to customize the appearance of the divisional lines:
Attribute |
Description |
|
If specifies the hex code for the color that will be used to render the horizontal divisional lines. e.g. |
|
Sets the thickness of the horizontal divisional lines(in pixels). |
|
Sets the transparency of the divisional lines. Can take values from |
The data structure used, in the chart above, to customize div lines is given below:
{
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
"divLineColor": "#6699cc",
"divLineAlpha": "60",
"divLineDashed": "0"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Last Week",
"data": [
{
"value": "13000"
},
{
"value": "14500"
},
{
"value": "13500"
},
{
"value": "15000"
},
{
"value": "15500"
},
{
"value": "17650"
},
{
"value": "19500"
}
]
},
{
"seriesname": "This Week",
"data": [
{
"value": "15400"
},
{
"value": "16800"
},
{
"value": "18800"
},
{
"value": "22400"
},
{
"value": "23800"
},
{
"value": "25800"
},
{
"value": "30800"
}
]
}
]
}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:
Given below are the attributes used to render divisional lines as dashed:
Attribute |
Description |
|
Set this to |
|
Sets the length of each dash of divisional lines(in pixels). |
|
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:
{
"chart": {
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0",
"lineThickness": "5",
"theme": "fint",
"divLineDashed": "1",
"divLineDashLen": "5",
"divLineDashGap": "6"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}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:
Given below is the attribute used to show/hide the horizontal grid bands:
Attribute |
Description |
|
Set this to |
The data structure used, in the chart above, to show/hide horizontal grid bands is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showAlternateHGridColor": "1",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}Customizing horizontal grid bands
A column 2D chart with customized horizontal grid bands looks as below:
Given below are the attributes used to customize the horizontal grid bands:
Attribute |
Description |
|
It specifies the hex code for the color that will be used to render the horizontal grid bands. e.g. |
|
It specifies the transparency of the horizontal grid bands. Can take values from |
The data structure used, in the chart above, to customize horizontal grid bands is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showAlternateHGridColor": "1",
"alternateHGridColor": "#99ccff",
"alternateHGridAlpha": "30",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}