Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Vertical divisional (or div) lines are vertical lines running through the canvas in a chart. They help in relating the data to its respective label, when there is large amount of data.

Vertical div lines are applicable only to line, area, spline, splineArea, and XY type charts.

The image below shows vertical div lines rendered in a line chart:

Configuring Your Chart - Vertical Div Lines

This section talks about:

Rendering vertical divisional lines

By default, vertical divisional lines are not rendered in a chart. A line chart with vertical div lines explicitly rendered is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "numVDivLines": "5", "vDivLineColor": "#99ccff", "vDivLineThickness": "1", "vDivLineAlpha": "50", "vDivLineDashed": "0", "theme": "fint" }, "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": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "numVDivLines": "5",
        "vDivLineColor": "#99ccff",
        "vDivLineThickness": "1",
        "vDivLineAlpha": "50",
        "vDivLineDashed": "0",
        "theme": "fint"
    },
    "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: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",
            //Vertical divline configuration
            "numVDivLines": "5",
            "vDivLineColor": "#99ccff",
            "vDivLineThickness": "1",
            "vDivLineAlpha": "50",
            "vDivLineDashed": "0",
            //Theme
            "theme": "fint"
        },
        "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 is the attribute used to render vertical div lines in a chart:

Attribute Description

numVDivLines

It specifies the number of vertical divisional lines to be rendered in the chart.

Customizing display of vertical divisional lines

A line chart with customized vertical div lines is as shown below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "numVDivLines": "5", "vDivLineColor": "#99ccff", "vDivLineThickness": "1", "vDivLineAlpha": "50", "vDivLineDashed": "0", "theme": "fint" }, "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": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "numVDivLines": "5",
        "vDivLineColor": "#99ccff",
        "vDivLineThickness": "1",
        "vDivLineAlpha": "50",
        "vDivLineDashed": "0",
        "theme": "fint"
    },
    "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: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",
            //Vertical divline configuration
            "numVDivLines": "5",
            "vDivLineColor": "#99ccff",
            "vDivLineThickness": "1",
            "vDivLineAlpha": "50",
            "vDivLineDashed": "0",
            //Theme
            "theme": "fint"
        },
        "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 customize the appearance of vertical div lines:

Attribute Description

vDivLineColor

If specifies the hex code for the color that will be used to render the vertical divisional lines. e.g. #00ffaa.

vDivLineThickness

Sets the thickness of the vertical axis division lines(in pixels).

vDivLineAlpha

Sets the transparency of vertical divisional lines. Can take values from 0 (transparent) to 100 (opaque).

Using dashed divisional lines

You can render vertical divisional lines as dashed lines, instead of the default continuous lines. A line chart with dashed lines as vertical div lines is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "numVDivLines": "5", "vDivLineColor": "#99ccff", "vDivLineThickness": "1", "vDivLineAlpha": "70", "vDivLineDashed": "1", "vDivLineDashLen": "5", "vDivLineDashGap": "3", "theme": "fint" }, "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": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "numVDivLines": "5",
        "vDivLineColor": "#99ccff",
        "vDivLineThickness": "1",
        "vDivLineAlpha": "70",
        "vDivLineDashed": "1",
        "vDivLineDashLen": "5",
        "vDivLineDashGap": "3",
        "theme": "fint"
    },
    "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: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",
            //Vertical divline configuration
            "numVDivLines": "5",
            "vDivLineColor": "#99ccff",
            "vDivLineThickness": "1",
            "vDivLineAlpha": "70",
            "vDivLineDashed": "1",
            "vDivLineDashLen": "5",
            "vDivLineDashGap": "3",
            //Theme
            "theme": "fint"
        },
        "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 dashed vertical div lines:

Attribute Description

vDivLineDashed

Set this to 1 to make vertical div lines dashed or 0 (default) to make them normal.

vDivLineDashLen

Sets the length of each dash of vertical div line(in pixels).

vDivLineDashGap

Sets the gap between two consecutive dashes in vertical div lines (in pixels).

Customizing vertical grid bands

Showing/hiding vertical grid bands

Vertical grid bands, by default, do not appear between the vertical divisional lines. A line chart with alternate vertical grid bands enabled is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "numVDivLines": "5", "showAlternateVGridColor": "1", "theme": "fint" }, "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": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "numVDivLines": "5",
        "showAlternateVGridColor": "1",
        "theme": "fint"
    },
    "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: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",
            //Vertical grid connfiguration
            "numVDivLines": "5",
            "showAlternateVGridColor": "1",
            //Theme
            "theme": "fint"
        },

        "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 is the attribute used to render the alternate grid bands:

Attribute Description

showAlternateVGridColor

Set this to 1 to show vertical grid bands or 0 to hide them.

Customizing display of vertical grid bands

A line chart with customized vertical grid bands looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "numVDivLines": "5", "showAlternateHGridColor": "1", "showAlternateVGridColor": "1", "alternateVGridColor": "#bee6ff", "alternateHGridColor": "#f4fbff", "alternateVGridAlpha": "30", "theme": "fint" }, "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": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "numVDivLines": "5",
        "showAlternateHGridColor": "1",
        "showAlternateVGridColor": "1",
        "alternateVGridColor": "#bee6ff",
        "alternateHGridColor": "#f4fbff",
        "alternateVGridAlpha": "30",
        "theme": "fint"
    },
    "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: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",

            //Vertical grid customization
            "numVDivLines": "5",
            "showAlternateHGridColor": "1",
            "showAlternateVGridColor": "1",
            "alternateVGridColor": "#bee6ff",
            "alternateHGridColor": "#f4fbff",
            "alternateVGridAlpha": "30",
            //Theme
            "theme": "fint"
        },

        "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 customize the vertical grid bands:

Attribute Description

alternateVGridColor

It specifies the hex code for the color that will be used to render the vertical grid bands. e.g. #00ffaa.

alternateVGridAlpha

It specifies the transparency of the vertical grid bands. Can take values from 0 (transparent) to 100 (opaque).

Top