Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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

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 will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week Vs This week",
            "xAxisName": "Day",
            "yAxisName": "No. of Visitors",
            "theme": "fint",
            "showValues": "0",
            //Setting automatic calculation of div lines to off
            "adjustDiv": "0",
            //Manually defining y-axis lower and upper limit
            "yAxisMaxvalue": "35000",
            "yAxisMinValue": "5000",
            //Setting number of divisional lines to 9
            "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Customizing display of divisional lines

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

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week Vs This week",
            "xAxisName": "Day",
            "yAxisName": "No. of Visitors",
            "theme": "fint",
            //Divisional line cosmetics
            "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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).

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 will load here..
{ "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" } ] }
{
    "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Visitors to website",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visits",
            "showValues": "0",
            "lineThickness": "5",
            "theme": "fint",
            //Converting to dashed div line
            "divLineDashed": "1",
            //Customizing div lines dash length in pixel
            "divLineDashLen": "5",
            //Setting gap between div line dashes
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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).

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 will load here..
{ "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" } ] }
{
    "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Show alternative horizontal grid color
            "showAlternateHGridColor": "1",
            //Theme
            "theme": "fint"
        },

        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Customizing horizontal grid bands

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

FusionCharts will load here..
{ "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" } ] }
{
    "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Horizontal band color and alpha configuration
            "showAlternateHGridColor": "1",
            "alternateHGridColor": "#99ccff",
            "alternateHGridAlpha": "30",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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).

Top